text-align: justify 与 ::before 无关，后者无法自适应单行文字宽度；单行标题下划线应使用 inline 元素+relative 定位+100% width；多行下划线推荐 border-bottom。
text-align: justify 不等于 ::before 能自动贴合文字宽度
直接给容器设 text-align: justify，再用 p::before { width: 100% }，那条线只会撑满整个块容器的宽度，和“当前行文字两端”完全无关。尤其当段落有 padding、max-width 或响应式断行时，线会明显错位。
根本原因在于：::before 是独立伪元素，它不参与文本流布局，也无法读取某一行的实际渲染宽度。所谓“两端对齐装饰线”，其实是两个不同目标被混用了同一个词：
- 文字内容的两端对齐 → 由
text-align: justify控制（作用于行内内容） - 装饰线的位置/长度 → 需靠
position: absolute、left/right或width: fit-content手动约束
单行标题下划线自适应宽度：用 inline + ::before 最稳
对标题、按钮等单行文本，最可靠的做法是把文字包进 span，让伪元素作用在 inline 元素上——此时 width: 100% 才真正等于该行文字渲染宽度。
关键点：
- 父容器不能是 block 级宽高失控的环境；建议用
display: inline-block或display: flex包裹 -
span必须显式设position: relative，否则::before的绝对定位会脱离预期上下文 - 下划线高度建议用
transform: translateY()微调，避开字体降部（descender）干扰
示例片段：
h2 {
display: inline-block;
}
h2 span {
position: relative;
}
h2 span::before {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: #333;
}
导航栏下划线跟随移动：用 ~ 选择器控制相邻项状态
要实现鼠标从一个 li 移向另一个时，下划线“从左入”或“从右入”，核心不是单个 li:hover::before，而是利用兄弟选择器 ~ 动态重置后续项的起始位置。
典型结构逻辑：
- 所有
li::before初始设width: 0; left: 100%（从右往左收起） -
li:hover::before设为width: 100%; left: 0（从左展开） -
li:hover ~ li::before再设一次left: 0，确保后续项下次 hover 时也从左开始动
注意：~ 只匹配**后面**的兄弟元素，所以顺序不能颠倒；若导航是 flex-direction: row-reverse，就得反过来处理 left/right 值。
多行文本下划线连续且避让降部：border-bottom 比 ::before 更省心
对多行段落加下划线，::after 很难精准控制每行底部位置，容易和字母 g、y、q 的降部重叠。此时 border-bottom 是更务实的选择：
- 天然支持多行，每行底部自动对齐
- 可用
line-height和padding-bottom精确控制间距 - 动画需配合
box-shadow或额外 wrapper 实现，但基础样式稳定
如果必须用伪元素做渐变或复杂动画，唯一可行路径是：把段落拆成每行一个 span（服务端或 JS 渲染），再逐个加 ::after——纯 CSS 无解。
容易被忽略的一点：中文段落极少需要 text-align: justify，因为汉字天然等宽；强行启用反而导致标点悬挂异常，优先检查设计稿是否真需要该效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
