::after 文字未对齐因默认行内且不参与垂直对齐；需 relative 定位+absolute+top:50%+transform；flex 下伪元素失效；响应式用 max-width 限制容器宽度；慎用 vw；统一 font-size 防渲染差异；content: "" 必须写。
用 ::after 在文本中间加线，为什么文字没对齐？
因为 ::after 默认是行内元素，且不参与文本流中的垂直对齐计算。常见表现是：线画出来了，但上下偏移、盖住文字或悬空在一边。
- 必须给父容器设
position: relative，再让::after用position: absolute定位 - 避免直接写
top: 0或bottom: 0—— 文字行高（line-height）会影响实际基线位置，建议用top: 50%+transform: translateY(-50%) - 如果父元素用了
display: flex，::after会失效（伪元素不继承 flex 布局），得换用真实子元素或改用border-bottom配合padding
::after 分割线怎么随屏幕缩放自动变短？
不能靠固定像素值（比如 width: 100px），否则小屏溢出、大屏太短。关键在利用 max-width 和容器宽度约束。
- 把分割线放在一个包裹
span或div里，该容器设width: 100%，再限制最大宽度（如max-width: 200px） -
::after本身设width: 100%，这样它就只撑到容器的当前可用宽 - 响应式断点下可改
max-width：比如@media (max-width: 768px) { .divider { max-width: 120px; } } - 慎用
vw单位——它按视口算，不是按父容器，容易在嵌套布局中失控
文字居中、线左右等距，但移动端线变歪了？
问题常出在字体渲染差异和默认 font-size 缩放上。iOS Safari 和 Android Chrome 对小字号的处理不同，导致 em 或 rem 计算结果漂移。
- 给父容器统一设
font-size: 16px（避免浏览器缩放干扰），再用em控制线长（如width: 4em） - 不要依赖
text-align: center+::after水平居中——它只居中文本，不保证线与文字间距一致；改用display: flex包裹文字和伪元素（但注意前面说的 flex 下伪元素失效问题） - 更稳的方案：用
background-image: linear-gradient()绘制线，配合background-position和background-size控制长度和位置，完全脱离伪元素定位逻辑
要不要用 content: ""？空字符串有没有副作用？
要，而且必须写。不写 content，::after 就不会渲染，无论其他样式多全。
立即学习“前端免费学习笔记（深入）”；
-
content: ""是唯一合法的空值；content: none是无效值，会被忽略 - 别写
content: " "（空格）——它会触发空白符渲染，在某些字体下产生不可见但占位的间隙，影响对齐 - 如果需要辅助技术（如读屏器）忽略这条线，加上
aria-hidden="true"到父元素，::after本身无法被语义化 - 极少数老版本安卓 WebView 对空
content渲染异常，可降级为content: "."+color: transparent，但纯 CSS 方案优先选""
font-smooth 都可能让同一条线在不同设备上偏移 1px。调的时候别只看“线出来了”，得放大到 200% 对齐像素边缘。 
