纯css无法让伪元素边框自动贴合文字长度，但可用transform:scalex()配合inline-block容器模拟可变长效果；需设width:100%、transform-origin:left center，并处理换行、继承、居中及兼容性问题。
伪元素边框长度不随内容变化？用 transform: scaleX() 动态缩放
直接说结论：纯 CSS 没法让伪元素边框“自动贴合文字长度”，但可以用 scaleX() + inline-block 容器模拟出视觉上可变长的效果。关键不是“画一条边”，而是“缩放一条固定边”。
常见错误是给 ::after 设固定 width 或用 left/right 百分比硬调——内容一变就错位，响应式下更不可靠。
- 必须把文字容器设为
display: inline-block（或inline-flex），否则position: absolute的伪元素无法相对其宽高计算 -
::after设成width: 100%+transform: scaleX(0.6)，数值按需微调；别碰left/right - 缩放中心默认是元素中点，若要左对齐边框，加
transform-origin: left center
文字换行时边框断裂？用 white-space: nowrap 或拆分容器
伪元素只作用于单行块级上下文。一旦文字换行，inline-block 宽度变成行宽最大值，scaleX() 就会拉伸过度或截断。
使用场景决定解法：标题类短文本优先加 white-space: nowrap 配合 overflow: hidden；正文摘要类则建议拆成多个 <span></span> 单元，每个单元独立套伪元素边框。
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap后记得配text-overflow: ellipsis和overflow: hidden，否则溢出破坏布局 - 响应式断点里，
scaleX()值可能需要媒体查询重设（比如小屏缩到0.4） - 不要给父容器设
width: fit-content—— Safari 对它的支持不稳定，仍推荐inline-block
边框粗细/颜色和文字不一致？伪元素继承失效的两个原因
::after 默认不继承 color，也不继承 font-size，所以边框常显得细、淡、偏移。这不是 bug，是 CSS 渲染规则本身。
最容易被忽略的是：伪元素的 font-size 影响 em 单位边框宽度，而 color 不影响 border-color——除非你显式写 border-color: currentColor。
- 统一控制粗细：用
border-bottom: 2px solid currentColor，currentColor会取父元素的color - 避免用
em写边框宽，改用px或rem，否则字体缩放时边框异常变粗 - 垂直居中偏移？加
top: 50%+transform: translateY(-50%)，别依赖vertical-align
Firefox 下伪元素位置飘移？强制触发 BFC + 重置 line-height
Firefox 对 inline-block 内部基线对齐更敏感，尤其当文字有 line-height > 1 时，::after 的 top 偏移会失准，看起来像边框“浮起来”。
这不是兼容性补丁，而是渲染模型差异：Firefox 把伪元素当作行内盒子参与基线计算，Chrome 则更倾向忽略。
- 在文字容器上加
line-height: 1（或具体数值如1.2），并确保与父级一致 - 加
vertical-align: bottom或middle显式对齐，别留默认值 - 极端情况可加
overflow: hidden强制创建 BFC，抑制基线干扰
真正难处理的是多语言混排（比如中英数字组合），此时字符实际高度不一致，scaleX() 能控长度，但垂直位置得靠 calc() + 字体度量经验微调——没通用解，只能测。
