伪元素 ::after 和 ::before 常被误认为只是用来加小圆点或小箭头，但它们本质上是 CSS 生成内容机制的一部分。理解它们的作用，需要从 content 属性、定位参考系、层叠规则和可访问性四个角度切入。
一、content 属性是伪元素生效的前提
伪元素 ::before 和 ::after 并不是独立的文档节点，它们必须挂靠在某个真实元素上。::before 会生成在该元素所有子内容之前，::after 则生成在最后。浏览器是否创建这个生成盒子，首先看 content 属性有没有被正确设置。即使你给 ::after 写了宽度、高度、背景色，只要没有 content，它就不会显示。
最简单的用法是插入一段固定文字。比如给必填表单项前面加红色星号，可以这样写：
.required::before {
content: "*";
color: #e03131;
margin-right: 4px;
}
这里 content 的值是一段字符串。它还可以是空字符串，这是清除浮动等布局技巧的基础，因为空字符串同样会生成一个真实的盒子，只是没有可见文本。借助 attr() 函数还能读取元素自身属性，例如 content: attr(data-count); 可以把角标数字从 HTML 属性中带出来。计数器场景下，counter() 配合 content 可以为章节自动编号，这些能力让伪元素不只是装饰，而能承担一部分轻量内容生成工作。
二、定位参考系与布局行为
伪元素默认的 display 值是 inline，这意味着它们会像普通行内文本一样排在父元素内容的前后。如果只是为了加图标或文字，这种行内布局通常够用。但一旦需要把它放到父元素的四个角、边缘或完全脱离文档流，就要设置 position。
常见做法是让父元素设置 position: relative;，伪元素设置 position: absolute;。此时伪元素的定位参考是最近的已定位祖先元素，和普通绝对定位子元素规则一致。父元素成为定位参考后，top、right、bottom、left 就能把伪元素精确放到目标位置。例如右上角消息角标：
.badge {
position: relative;
display: inline-block;
padding: 6px 12px;
background: #f1f3f5;
border-radius: 4px;
}
.badge::after {
content: attr(data-count);
position: absolute;
top: -8px;
right: -12px;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 4px;
background: #e03131;
color: #ffffff;
border-radius: 9px;
font-size: 12px;
text-align: center;
}
如果父元素没有设置定位，伪元素的绝对定位会一直向上查找，直到找到一个已定位祖先；如果都没有，就相对于初始包含块。这一点经常被忽略，导致角标跑到页面左上角。因此使用绝对定位伪元素前，先确认父级是否有明确的位置声明。
三、典型应用：清除浮动、提示气泡和装饰线
清除浮动是 ::after 的经典用途。父元素里都是浮动子元素时，高度会塌陷，通过给父元素追加一个不可见的块级伪元素并设置 clear: both;，可以强制父元素重新计算高度。写法如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这里没有插入任何可见文字，content: "" 只是触发盒子生成。display: table 是为了兼容旧版浏览器的渲染差异，现代项目也可以使用 display: block;。这种方式的好处是不需要往 HTML 里塞额外的空 <div> 元素，结构保持干净。
另一个高频场景是提示气泡。把提示文字放在 data-tip 属性中，通过 attr() 交给 ::after 展示，再配合 hover 控制显隐，可以得到纯 CSS 的 tooltip。例如：
.tooltip {
position: relative;
cursor: help;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 4px 8px;
background: #333333;
color: #ffffff;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity .2s;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
装饰线、列表序号、渐变遮罩也都可以用伪元素实现。它们共同的特点是：不占用额外 HTML 标签，视觉层和结构层分离得更好。
四、层叠、事件穿透与可访问性细节
伪元素虽然是虚拟节点，但同样参与层叠上下文的计算。默认情况下，::before 和 ::after 会作为父元素内容的一部分绘制。如果给它们设置负的 z-index，它们可能被父元素背景遮住；如果设置正的 z-index，又可能盖住同级内容。需要注意 z-index 只对定位元素有效，未设置 position 时它不会起作用。
当伪元素作为浮层盖在交互元素上方时，它可能挡住鼠标事件。比如一个完全覆盖按钮的 ::after，按钮点击会失效。解决办法是给伪元素设置 pointer-events: none;，让事件穿透到下层元素。这个细节在遮罩、装饰层和 loading 状态中非常关键。
另外，可访问性方面不能过度依赖伪元素传递信息。屏幕阅读器对 CSS 生成内容的支持并不统一，某些读屏软件可能忽略 ::before 和 ::after 的文本。因此重要的提示、状态、错误信息应该写入真实 HTML，而不是只放在伪元素里。伪元素更适合纯装饰、辅助视觉和不需要语义化的内容。