::after伪元素画下划线比border-bottom更灵活，因其不撑开行高、可精准控制长度与位置；需设position:relative和content:""，用width:fit-content或max-content匹配文字宽度，避免错位。
用 ::after 伪元素画下划线比 border-bottom 更灵活
直接用 border-bottom 给标题加下划线，会撑开行高、影响垂直居中，还很难控制长度（比如只下划到文字末尾，不延伸到容器右边界）。::after 伪元素能精准定位、独立控制宽高颜色，且不参与文档流，是更干净的解法。
::after 下划线的基本结构和关键样式
核心思路：给标题设 position: relative，再用 ::after 在其底部绝对定位画一条横线。必须显式设置 content: ""，否则伪元素不渲染。
.title {
position: relative;
display: inline-block; /* 确保宽度包裹文字，避免下划线过长 */
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: -4px; /* 调整下划线离文字底部的距离 */
width: 100%;
height: 2px;
background-color: #333;
}-
display: inline-block很关键——让width: 100%指向文字实际宽度，不是父容器宽度 -
bottom: -4px是常见起始值，具体数值需根据字体大小和行高微调 - 不用
border或box-shadow，纯靠height + background-color控制粗细和颜色
让下划线只覆盖文字区域（不拉满）的两种可靠方式
默认 width: 100% 是对齐容器的，要“缩进”或“精确贴合”，得换策略：
- 用
width: fit-content（现代浏览器支持好，但 IE 完全不支持） - 更兼容的做法：用
left和right同时设为0，再配合transform: scaleX(0.8)缩放，或直接用width: calc(100% - 16px)手动减去左右留白 - 如果标题是单行且内容固定，最稳的是用
width: max-content+margin: 0 auto居中伪元素
.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: max-content; /* 严格匹配文字宽度 */
height: 2px;
background-color: #333;
margin: 0 auto;
}响应式或动态内容下的坑与对策
当标题文字长度变化（如多语言切换、用户输入）、或字体在不同设备上渲染差异大时，下划线容易错位或截断：
立即学习“前端免费学习笔记（深入）”；
-
max-content在某些安卓 WebView 中表现不稳定，建议降级为fit-content或 JS 辅助计算宽度 - 不要依赖
em或rem设bottom值——字体度量（ascent/descent）因字体而异，用px更可控 - 如果标题有
line-height> 1，bottom: -4px可能不够，可改用transform: translateY(2px)微调 - 避免给伪元素设
transition动画——部分浏览器在重排时会闪烁或跳动
真正难的不是画出那根线，而是让它在各种字体、缩放、DPR、国际化文本下都稳稳贴在文字下方——这时候宁可多测几个真实设备，别信“理论上应该可以”。
