伪元素必须配合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)"; } }
<span> 标签。毕竟伪元素本质是“视觉糖”，不是结构层。 
