CSS伪元素最大的价值在于：不需要改动HTML结构，就能为一个元素增加额外视觉层次。::before和::after分别代表元素内容前后的两个虚拟盒子，它们默认不占用真实DOM节点，却可以像普通元素一样设置背景、边框、定位、动画等样式。组合使用这两个伪元素，相当于在不添加额外标签的情况下多出两层可独立控制的装饰层，特别适合按钮扫光、卡片描边、标题下划线、角标徽章等场景。
一、伪元素的基础语法与显示条件
要让::before或::after真正显示出来，必须设置content属性。即使不需要任何文字，也要写成content: ""，否则伪元素不会被生成。这个规则是初学者最容易忽略的地方。content属性可以接收字符串、空字符串、计数器、图片地址等值，但通常装饰场景会使用空字符串，然后通过背景、边框或阴影来绘制视觉内容。
默认情况下，伪元素是行内级盒子，宽高不会直接生效，也不能像块级元素那样自由控制尺寸。如果只需要加一个小圆点或短横线，默认行内特性会很方便；但大多数组合装饰中，需要把它们改成position: absolute或display: block，并配合父元素的定位上下文来摆放。一个实用的做法是给父元素设置position: relative，两个伪元素使用绝对定位，然后通过top、right、bottom、left或inset快速控制位置。
/* 基础结构：只有设置content后伪元素才存在 */
.card {
position: relative;
padding: 24px;
background: #fff;
border-radius: 12px;
}
.card::before,
.card::after {
content: "";
position: absolute;
border-radius: 12px;
}
.card::before {
inset: 0;
background: rgba(102, 126, 234, 0.08);
z-index: -1;
}
.card::after {
right: 16px;
top: 16px;
width: 12px;
height: 12px;
background: #667eea;
border-radius: 50%;
}
在上面的代码中，::before覆盖整个卡片区域并放在底层，形成一层淡色底纹；::after只占据右上角的小圆点，用作状态提示。两者都由同一个父元素控制，不需要额外标签。这里还要注意z-index和定位顺序，如果伪元素没有设置定位，z-index通常不会产生预期效果。
二、组合定位与层级关系
组合使用::before和::after时，最容易出现的问题不是样式不生效，而是层级混乱。两个伪元素都使用绝对定位后，仍旧遵循后来者居上的规则：::after默认会覆盖在::before上方。如果要让::before作为最底层背景，::after作为前景装饰，无需特别设置z-index；但若希望::before覆盖在父元素内容上方、形成遮罩或扫光层，就需要手动调整z-index。
另一个关键点是伪元素与父元素内容之间的遮挡关系。很多装饰效果需要伪元素位于文字下方，例如卡片底层网格纹理；也有的需要位于文字上方，例如悬浮遮罩。通过z-index: -1可以把伪元素放到父元素背景下方，但要注意父元素不能创建新的层叠上下文，否则负值可能不会穿透到期望层级。更稳妥的方式是给父元素设置isolation: isolate，让内部层叠关系封闭管理。
/* 按钮扫光：before负责背景，after负责光带 */
.btn {
position: relative;
overflow: hidden;
padding: 12px 32px;
background: #4f46e5;
color: #fff;
border-radius: 999px;
isolation: isolate;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
z-index: -1;
}
.btn::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: rgba(255, 255, 255, 0.25);
transform: rotate(20deg);
transition: left 0.5s ease;
}
.btn:hover::after {
left: 125%;
}
这个例子中::before被设置为底层渐变背景，::after则是一条倾斜的半透明白色光带。默认状态下光带位于按钮左侧外部，鼠标悬停时移动到右侧，形成常见的扫光效果。因为父元素设置了overflow: hidden，超出的光带会被裁剪，按钮本身保持整洁。若没有isolation: isolate，z-index: -1可能导致底层背景跑到父元素后方而不可见。
三、典型装饰场景与实现思路
伪元素组合非常适合实现双层描边。单层border有时不够精致，可以在元素外侧再叠加一层细边框或间距边框。比如给卡片设置一个普通边框，再用::before向外扩展并设置另一层半透明边框，形成类似双线框的效果。这个方案不需要额外标签，而且能通过CSS变量统一调整边距和颜色。
/* 双层边框卡片 */
.frame {
position: relative;
padding: 20px;
border: 2px solid #334155;
border-radius: 16px;
}
.frame::before {
content: "";
position: absolute;
inset: 6px;
border: 1px dashed #94a3b8;
border-radius: 12px;
pointer-events: none;
}
这里::before负责内部虚线框，父元素负责外层实线框，二者形成一实一虚的对比。使用inset: 6px可以保持与父元素内边距一致。为了避免伪元素遮挡鼠标事件，装饰性伪元素通常要加上pointer-events: none，否则点击按钮或选择文本时会有奇怪的交互问题。
另一个常见需求是标题底部的动画下划线。传统做法是给标题加border-bottom，但无法灵活控制长度和动画。利用::after可以做一个从中间向两边展开的下划线。把伪元素放在标题底部，默认宽度为0，悬停或进入视口时过渡到目标宽度。若同时需要一条静态浅色底线，可以让::before承担静态线，::after承担动态线。
/* 标题下划线：before静态底纹，after动态强调线 */
.title {
position: relative;
display: inline-block;
padding-bottom: 8px;
color: #0f172a;
}
.title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #e2e8f0;
}
.title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: #4f46e5;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.title:hover::after {
width: 100%;
}
静态线由::before绘制，动态高亮线由::after绘制。由于两个伪元素都定位在标题底部，::after默认在后，因此会覆盖住静态线。悬停后宽度从0到100%，同时保持水平居中。这种组合让装饰层各司其职，代码更清晰。
四、常见错误与可维护性建议
第一个常见错误是忘记设置content，导致伪元素完全不可见。很多开发者在调试时反复检查定位、背景、尺寸，结果只是少了一行content: ""。第二个问题是把伪元素当成真实DOM节点来操作。JavaScript的选择器无法直接选中伪元素，也不能通过style属性单独修改某一个伪元素的样式。需要动态变化时，建议通过CSS变量间接控制。
/* 利用CSS变量动态控制伪元素颜色 */
.badge {
--badge-color: #ef4444;
position: relative;
padding: 8px 16px;
}
.badge::before {
content: attr(data-count);
position: absolute;
right: -10px;
top: -10px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--badge-color);
color: #fff;
font-size: 12px;
line-height: 20px;
text-align: center;
}
这个角标示例使用content: attr(data-count)读取元素上的data-count属性值，让伪元素显示具体数字。要切换颜色时，只需在父元素上更新--badge-color变量，而不必写多套选择器。类似地，尺寸、位置、渐变角度等都可以通过变量维护。
性能方面，伪元素本身是浏览器合成的一部分，合理使用不会造成明显开销。但大量绝对定位伪元素配合box-shadow、filter或者频繁触发的动画，仍可能增加重绘成本。对于鼠标悬停动画，优先使用transform和opacity，它们通常能由合成器处理，减少主线程压力。还要注意装饰性伪元素不要包含大段文本，必要时只放短文本或数字。
整体来看，::before和::after的组合用法并不复杂，关键是理解它们不是真实DOM节点，必须依赖content存在；再根据需求选择普通流、绝对定位或弹性布局来放置。将两个伪元素拆分为底层装饰和前景装饰，再配合CSS变量管理样式，可以显著减少HTML中的冗余标签，让结构更清晰、样式更集中。掌握这些基础后，双层边框、扫光按钮、动态下划线、角标徽章等效果都能用简洁的CSS完成。