伪元素画线不居中因默认行内级且受基线影响；IE11不支持flex下伪元素渲染；主题变量需定义在:root才生效。
伪元素画线时内容没居中，::before 和 ::after 总是偏移
根本原因是伪元素默认是行内级，且未脱离文档流，容易受字体基线、行高、垂直对齐方式影响。尤其当标题用 display: inline-block 或含空格/换行时，左右伪元素的“生长点”不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给标题本身设
display: flex+align-items: center，让文字和伪元素在同一条轴线上对齐 - 伪元素统一设
content: ""+flex-grow: 1，而非靠width或margin撑开 - 避免给伪元素设
vertical-align，它在 flex 容器里无效，反而干扰布局 - 如果标题含多行文本，
flex-grow仍生效，但需额外加white-space: nowrap防断行破坏对称
flex-grow 在响应式下失效，小屏时装饰线缩成一点
这不是 flex-grow 的问题，而是父容器（标题元素）宽度被内容撑满后，剩余空间为零——尤其在移动端，标题文字占满整行，flex-grow 就没地方可“长”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保标题父容器有明确的
max-width或width: 100%，不要依赖内容自然换行来释放空间 - 给伪元素加最小宽度约束：
min-width: 1rem，防止极端窄屏下完全消失 - 用
@media单独调低小屏下的font-size，间接扩大可用空白区域 - 别用
vw单位控制伪元素宽度，它和flex-grow混用会导致计算冲突
IE11 下伪元素+flex-grow 完全不显示装饰线
IE11 对 ::before/::after 在 flex 容器中的渲染支持极差：要么不渲染，要么不参与 flex 分配。这是已知兼容性断层，不是写法错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测 IE11 用
@supports not (display: flex)或更准的@supports (-ms-ime-align: auto) - 降级方案：改用
background-image: linear-gradient()在标题底部画单线，或用绝对定位的<div> 模拟 <li>若必须用伪元素，IE11 下可退化为左右各一个固定宽的 <code>border-left/border-right，配合padding模拟效果 - 千万别在 IE11 中尝试
flex: 1写法，它会直接忽略整个伪元素 - 把主题变量统一定义在
:root，例如--deco-color: #333、--deco-height: 2px - 伪元素中直接使用
background-color: var(--deco-color)，别套color或border-color（它们不控制背景） - 高度控制优先用
height+background-color，比border更稳定，也支持圆角和渐变 - 如果用了 CSS-in-JS（如 Emotion），确保变量注入到了
:root，而不是仅限于组件 class 内部
装饰线颜色/粗细随主题切换失败，CSS 变量没生效
伪元素能读取 CSS 变量，但前提是变量定义在伪元素可继承的作用域内。常见坑是变量写在组件局部作用域，而伪元素挂在全局选择器上，导致取值为 unset。
实操建议：
立即学习“前端免费学习笔记（深入）”；
