CSS伪元素::after可以在选中元素的内容之后插入生成的装饰内容，利用这个特性可以轻松实现各类分隔线效果，不需要额外增加冗余的HTML标签，让代码结构更简洁。
::after伪元素的基本使用规则
::after伪元素需要和content属性配合使用，即使不需要插入文本内容，也需要设置content为空字符串，否则伪元素不会生效。伪元素默认是行内元素，需要设置display属性调整显示类型，才能控制宽度和高度。
/* 基础语法示例 */
.target_element::after {
content: ""; /* 必须设置，否则伪元素不显示 */
display: block; /* 转为块级元素，方便控制尺寸 */
/* 其他样式属性 */
}
实现基础单线条分隔线
最基础的分隔线是一条纯色的横线，可以通过设置伪元素的宽度、高度和背景色实现。以下示例是在标题元素下方添加一条居中的灰色分隔线。
.title {
position: relative;
text-align: center;
padding-bottom: 20px;
}
.title::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 2px;
background-color: #e0e0e0;
}
上述代码中，通过position属性将::after伪元素定位到标题的正下方，transform用来实现水平居中，宽度和高度控制分隔线的尺寸，background-color设置分隔线的颜色。
实现渐变背景分隔线
如果需要分隔线有渐变效果，可以把background-color替换为background-image的线性渐变属性，让分隔线视觉效果更丰富。
.gradient_divider::after {
content: "";
display: block;
width: 100%;
height: 3px;
/* 从左到右的渐变，从蓝色过渡到紫色 */
background-image: linear-gradient(to right, #4a6cf7, #9b59b6);
margin-top: 15px;
}
实现带装饰图案的分隔线
如果需要分隔线中间带有装饰图案，比如小图标或者特殊符号，可以结合background属性设置背景图片，或者直接在content中插入对应的符号内容。
.decorative_divider {
text-align: center;
position: relative;
line-height: 1;
}
.decorative_divider::before,
.decorative_divider::after {
content: "";
display: block;
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background-color: #ccc;
}
.decorative_divider::before {
left: 0;
}
.decorative_divider::after {
right: 0;
}
.decorative_divider span {
display: inline-block;
padding: 0 15px;
position: relative;
z-index: 1;
color: #666;
}
这个示例中，我们用::before和::after分别生成左右两侧的分隔线，中间用span标签放置装饰文字，实现两侧线条中间带文字的分隔线效果。
注意事项
- ::after伪元素生成的内容不属于DOM节点，无法通过JavaScript直接操作，适合做纯视觉装饰。
- 如果父元素没有设置position属性，伪元素的absolute定位会相对于最近的已定位祖先元素，找不到则会相对于整个页面定位，容易出现位置偏差。
- 移动端适配时，分隔线的宽度可以使用百分比或者相对单位，避免固定像素导致在小屏幕上显示异常。
- 如果需要兼容旧版本浏览器，需要注意伪元素的单冒号语法
:after和双冒号语法::after的区别，单冒号语法兼容更早的浏览器版本。