css 伪元素实现装饰效果_通过 ::before 和 ::after 添加前后修饰

伪元素必须配合content属性才能显示，且需注意定位、层叠、兼容性及适用场景。

伪元素必须配合 content 属性才能显示

很多初学者写完 ::before 或 ::after 却看不到效果，根本原因是没设 content。这个属性是强制的——哪怕只是加个空格或点，也得显式声明。

• content: "" 是最常用写法，用于纯装饰（比如添加边框、背景、图标）
• content: "→" 或 content: "•" 适合文本类小装饰
• content: attr(data-label) 可读取元素自定义属性，实现动态内容
• 值为 none 或完全不写 content，伪元素就不会渲染

定位伪元素时注意默认文档流和层叠上下文

伪元素默认是 inline 级别，且不占据空间。想精准控制位置，通常要搭配 position: absolute，但前提是父元素已设 position: relative（或其它非 static 值）。

• 没给父元素设定位，absolute 会相对于最近的定位祖先，可能跑到页面外
• 伪元素默认 z-index 为 auto，若需盖在内容上，要显式设 z-index: 1（或更高）
• 用 transform: translate(-50%, -50%) 居中时，记得先设 top: 50% + left: 50%

.card {
  position: relative;
}
.card::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #ff6b6b;
  border-radius: 50%;
  z-index: 1;
}

用 ::before 和 ::after 实现常见装饰模式

两个伪元素可以分工：一个做背景/遮罩，一个做图标/标记。关键在于避免互相干扰，且保持语义干净。

• 「角标」：父容器设 position: relative，::after 绝对定位在右上角
• 「下划线动画」：用 ::after 绘制细线，配合 transform: scaleX(0) + transition
• 「引用块引号」：::before 插入大引号字符，font-size 放大，color 设灰阶
• 慎用多个嵌套伪元素——CSS 不支持 ::before::before，只能靠多层 DOM 元素补位

兼容性与性能要注意这些细节

::before / ::after 在 IE8+ 都支持，但老版本只认单冒号 :before。现代项目建议统一用双冒号，同时确保构建工具（如 Autoprefixer）没误删。

• 大量使用伪元素（尤其带 box-shadow 或 filter）可能触发重绘，滚动卡顿时可考虑改用 SVG 背景
• 伪元素无法绑定事件，click 必须作用于宿主元素，再通过 event.target 判断是否命中伪元素区域（实际不可靠，建议用真实子元素）
• 打印样式表中，伪元素默认不显示，需手动加 @media print { .x::after { content: " (printed)"; } }

真正难的不是写出效果，而是判断该不该用伪元素——当修饰需要响应式缩放、用户交互或 SEO 暴露时，宁可用 标签。毕竟伪元素本质是“视觉糖”，不是结构层。