必须设置 content: ""; 否则 ::after 不渲染；父元素需设 position: relative；多行文本下伪元素无法每行显示装饰线。
用 ::after 添加装饰线必须设置 content
不写 content，::after 伪元素根本不会渲染，哪怕你写了 border-bottom 或 background 也没用。这是最常见的“线没出来”原因。
-
content可以是空字符串：content: ""; - 不能省略，也不能写成
content: none;（无效） - 如果想让装饰线独立于文字布局，建议用
display: block;或display: inline-block;
装饰线位置偏移常用组合：position: absolute + top/bottom/left/right
默认 ::after 是 inline 级伪元素，直接加宽高或边框容易撑开父容器、影响文字流。更可控的做法是脱离文档流：
div {
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: -4px; /* 线在元素底部下方 4px */
left: 0;
width: 100%;
height: 2px;
background: #007bff;
}
- 父元素必须设
position: relative（或其他非static值），否则absolute会相对于最近定位祖先或 viewport 定位 - 用
height+background比border-bottom更灵活（比如要渐变线、虚线、阴影） - 避免用
margin-bottom推动伪元素——它在absolute下失效
响应式装饰线要注意 width 和 transform 的兼容性
当父元素宽度动态变化（如 flex 项、百分比容器），直接写 width: 100% 通常没问题；但若父元素有 padding 或 box-sizing 不一致，可能错位。
- 保险做法：用
left: 0; right: 0;替代width: 100%，自动填满可用空间 - 要做缩放动画（比如 hover 变长），优先用
transform: scaleX()而非改width，性能更好且不触发重排 - 旧版 Safari 对
::after在display: flex子项里的定位支持不稳定，可加flex-shrink: 0避免压缩干扰
多行文本下装饰线对齐困难？试试 box-decoration-break 或换思路
::after 本身不感知文本换行，所以给 inline 元素（如 span）加底部装饰线时，线只会出现在最后一行末尾，不是每行底下都有。
- 纯 CSS 无完美解：目前
box-decoration-break: clone对::after无效 - 可行替代：
background-image: linear-gradient(...)配合background-position: bottom和background-repeat: repeat-x，但仅适用于单色实线 - 真正需要每行底线？考虑用
border-bottom直接作用于块级容器，或 JS 计算行高后插入多个绝对定位伪元素（小范围可用）
装饰线看着简单，但 content 忘写、父容器没定位、多行对齐这三处，几乎覆盖了 90% 的线上问题。先检查这两行：content: ""; 和 position: relative，再调样式，能省下大量调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
