使用CSS伪元素::after可以在不增加HTML标签的情况下，为元素尾部添加装饰线条，常用于标题、导航项或按钮的视觉增强。关键在于通过::after生成一个伪元素，并控制其样式与位置。
::after基础语法
::after伪元素在选定元素的内容之后插入内容，通常配合content属性使用。即使不添加实际文字，也需要设置content: ""才能生效。
.element::after {
content: "";
display: block;
width: 100px;
height: 2px;
background: #000;
}
实现尾部装饰线条的方法
为了让线条出现在元素末尾，需合理设置定位方式。常见做法是将父元素设为相对定位，伪元素设为绝对定位。
- 给目标元素设置
position: relative - 设置
::after为position: absolute，并调整位置 - 定义线条的宽度、高度和背景色
- 通过
top、left等属性对齐到元素尾部
.title {
position: relative;
display: inline-block;
padding-right: 20px;
}
.title::after {
content: "";
position: absolute;
right: 0;
bottom: 4px;
width: 40px;
height: 2px;
background-color: #007acc;
}
动态效果增强（可选）
可结合transition或transform实现线条动画，比如悬停时延长或淡入。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设置
width: 0，opacity: 0 - 触发
:hover时过渡到完整宽度 - 利用
transform做平移动画更流畅
.title::after {
content: "";
position: absolute;
right: 0;
bottom: 4px;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.title:hover::after {
width: 40px;
opacity: 1;
}
基本上就这些。掌握定位与伪元素的配合，就能灵活地为任何元素添加尾部装饰线条，既简洁又高效。注意保持语义清晰，避免过度使用影响可读性。
