::after伪元素通过content属性在元素后插入装饰内容，常用于创建分隔线或角标等视觉效果。例如在导航菜单中为每个.nav-item添加竖线分隔，再通过:last-child排除最后一个元素的分隔线；也可用于卡片右上角添加“New”标签，结合绝对定位与z-index实现叠加效果。使用时需注意：content不能为空、默认为行内元素、不占文档流，适合配合hover实现动态动画，提升样式灵活性并减少HTML冗余。
在CSS中，::after 伪元素常用于在元素内容之后插入装饰性内容，而无需修改HTML结构。通过它实现分隔线或背景装饰效果，既简洁又灵活。
使用 ::after 创建分隔线
常见于列表项之间、导航菜单或段落之间添加视觉分隔。通过设置 ::after 的尺寸和背景色，可以生成一条垂直或水平的分隔线。
例如，在水平导航中为每个菜单项右侧添加竖线：
.nav-item {
position: relative;
padding-right: 15px;
}
.nav-item::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: #ccc;
}
注意：最后一个元素通常不需要分隔线，应通过 :last-child 排除：
立即学习“前端免费学习笔记（深入）”；
.nav-item:last-child::after {
display: none;
}
用 ::after 添加装饰性背景
除了分隔线，::after 还适合创建悬浮图标、角标、渐变遮罩等装饰元素。比如在卡片右上角添加“New”标签：
.card {
position: relative;
padding: 20px;
border: 1px solid #ddd;
}
.card::after {
content: "New";
position: absolute;
top: -8px;
right: -8px;
background: #ff6b6b;
color: white;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
利用绝对定位与层级控制（z-index），这类装饰可精准叠加在目标元素之上。
关键注意事项
- content 属性必须存在：即使为空字符串（""），否则 ::after 不会渲染。
- 默认为行内元素：若需设置宽高，建议声明 display: block 或 inline-block。
- 不占据文档流：定位常用 absolute 配合父元素的 relative 实现精确定位。
- 可被隐藏或动画：结合 hover 等状态，实现动态出现的分隔或提示效果。
基本上就这些。合理使用 ::after 能减少冗余标签，让结构更干净，样式更集中。
