::before无法实现文字两端对齐，因其不能感知行宽；真正需配合text-align: justify控制文本，用absolute定位或inline场景模拟装饰线视觉对齐。
::before 装饰线无法直接实现“文字两端对齐”效果，它只能画一条线——而你真正需要的，是让这条线在段落/标题下方“视觉上匹配文字宽度”，或配合 text-align: justify 实现整体排版对齐。混淆这两者，是多数人写不出预期效果的根源。
为什么直接用 ::before 画不出“两端对齐”的线
::before 是单个伪元素，它没有“感知文字宽度”的能力，也不能自动拉伸到当前行末。所谓“两端对齐装饰线”，本质是两种不同需求混用了同一关键词：
- 文字内容的两端对齐 → 由
text-align: justify控制（作用于文本流） - 装饰线的位置/长度控制 → 由
::before的width、left/right、transform决定（作用于块级或绝对定位盒子）
如果你给一个 p 设置了 text-align: justify，再加 p::before { width: 100% }，那条线只会撑满整个 p 的容器宽度，和“当前行文字两端”无关——尤其当段落有缩进、padding 或响应式断行时，错位立刻出现。
想让 ::before 线“贴合最后一行文字两端”，得绕开 width: 100%
纯 CSS 没法读取最后一行渲染宽度，但可以通过组合技巧模拟视觉对齐。适用场景：标题下短横线、引言前引导线等单行强调位。
- 用
position: absolute+left: 0; right: 0;让线铺满父容器内宽（需父元素有padding或max-width限制） - 若父元素无明确宽度约束，改用
width: fit-content+margin: 0 auto配合display: block，使线宽度跟随内容自然收缩 - 更稳妥的做法：把装饰线逻辑移到
inline场景，例如用span::before包裹单行标题文字，此时width: 100%才真等于该行宽度
示例（标题下自适应宽度横线）：
.title-inline {
display: inline-block;
position: relative;
}
.title-inline::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.3em;
height: 2px;
background: #333;
}
配合 text-align: justify 实现“整段两端+装饰线居中”
这是最常见也最容易翻车的组合：段落启用两端对齐，同时希望每段开头或结尾有一条装饰线（如引用块前竖线、列表项前小横线）。关键不是让线“两端”，而是让它稳定出现在预期位置。
- 避免用
margin-left: 0; margin-right: 0试图推线到边缘——外边距会折叠，且不响应 justify 后的字间距变化 - 正确做法：把线作为段落首字符的“前置修饰”，用
display: inline-block+vertical-align: top插入，并设固定尺寸（如width: 0.5em; height: 1.2em） - 若需线随文字换行延伸，改用
background-image: linear-gradient(...)绘制重复横线，比 ::before 更可控
注意：text-align-last: justify 对伪元素无效，别指望它拉伸 ::before。
容易被忽略的兼容性与渲染细节
很多问题不是代码写错，而是浏览器对伪元素盒模型的理解差异：
-
content: ""必须存在，哪怕为空；否则整个 ::before 不参与渲染流程 - 在 flex 容器中，
::before默认是匿名子项，受flex-shrink: 1影响——线可能被压缩消失，务必加flex-shrink: 0 - 使用
em或ch单位定义线长（如width: 12ch）比固定px更适应字体缩放和响应式 - Firefox 对
text-justify: inter-character支持较好，但 Chrome 目前仅支持inter-word，别依赖它微调 ::before 位置
真正难的从来不是画一条线，而是让这条线在各种断行、缩放、字体切换下，始终停在你想让它停的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
