用::after画带文字的装饰横线需设content值、定位层级并处理Flex宽度与像素对齐问题：content必须非空，文字需relative+z-index或伪元素absolute定位，Flex中加flex:1或width:100%，移动端用transform:scaleY(0.5)或background-image替代border以避免模糊。
怎么用 ::after 画一条带文字的装饰横线
直接上手：给一个元素加 ::after，设为 display: block，用 border-bottom 或 background 画线，再通过 content 插入文字——但这里容易错在默认不显示、没定位、文字遮不住线。
实操建议：
-
content必须有值（哪怕content: ""），否则::after不渲染 - 要让文字“压”在线上，得把文字设为
position: relative，并用z-index确保它在伪元素上方；或者反过来，把伪元素设为position: absolute，手动控制层级 - 常见错误是忘记给父容器设
position: relative，导致absolute的伪元素脱标乱飘 - 示例：
.section-title::after { content: "更多"; display: block; width: 60px; margin: 8px auto 0; border-bottom: 2px solid #333; text-align: center; font-size: 14px; line-height: 1; }——这会在线下方居中出字，但字和线是分离的；真要“字在线上”，得用background+padding把字垫高
为什么 content 里不能直接写 HTML 标签
因为 content 只接受字符串、attr()、counter() 和少数几个生成值，不解析 HTML。写 content: "→" 就真显示那串字符，不是箭头。
实操建议：
- 想加图标？用 Unicode 字符，比如
content: "→"或content: "•" - 需要 SVG 或复杂结构？别硬塞进
content，改用真实 DOM 元素 + CSS 控制样式更可控 - 用
attr(data-label)可以动态读取属性值，适合多语言或 CMS 场景，但注意属性值仍是纯文本
::after 横线在 Flex 容器里为啥不占满宽度
Flex 子项默认不拉伸（flex: 0 1 auto），::after 作为匿名子项，宽度由内容撑开，不是自动 100%。
实操建议：
- 给伪元素加
flex: 1，但需确保父容器是display: flex且方向为 row - 更稳妥的是用
width: 100%+margin: 0 -100%配合box-sizing: border-box，但要注意父容器是否设置了overflow: hidden - 如果父元素用了
justify-content: space-between，伪元素可能被挤到最右，此时应单独设margin-left: auto或用flex-grow: 1控制伸缩
移动端下 ::after 横线模糊或错位怎么办
本质是像素对齐问题：CSS 像素和设备物理像素不匹配时，1px 边框会被渲染成 0.5px 或插值模糊；绝对定位偏移量没取整也会漂移。
实操建议：
- 避免用
border-bottom: 1px，改用transform: scaleY(0.5)配合transform-origin: top模拟高清线 - 用
background-image: linear-gradient(#000, #000)并设background-size: 100% 1px，比边框更稳 - 定位类偏移（如
top: 2px）尽量用rem或em，避免固定px在高 DPR 设备上失准 - 检查是否触发了 iOS Safari 的“字体抗锯齿强制开启”，有时加
-webkit-font-smoothing: antialiased反而让线条更清晰
伪元素画线看着简单，但横跨布局模式、缩放逻辑、渲染管线三层，稍不注意就线上出细线断层或文字切半——最常被忽略的是父容器的 font-size 对 em 单位的影响，以及 transform 引起的合成层切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
