text-decoration: underline 未生效主因是父元素设了 none 或子元素用 inline-block/float 脱离文本流；下划线作用于行框，非文字底部，需检查继承与 display 类型。
text-decoration: underline 为什么没生效
常见原因是父元素设置了 text-decoration: none，或者子元素用了 display: inline-block / float 等脱离文本流的样式，导致下划线中断或消失。CSS 的下划线是作用在「行框（line box）」上的，不是简单贴在文字底部。
- 检查祖先元素是否显式写了
text-decoration: none—— 它会继承并覆盖子元素的underline - 避免对要加下划线的文字直接设
display: inline-block；若必须用块级行为，改用display: inline+padding模拟 - 使用
text-underline-offset微调下划线离文字的距离（Chrome 89+、Firefox 84+ 支持），比如text-underline-offset: 2px
怎么让下划线颜色/粗细/样式和文字不同
text-decoration 是复合属性，可以一次性定义线型、颜色、位置，但浏览器兼容性要注意：老版本 Safari 和部分安卓 WebView 不支持分开设置颜色。
- 推荐写法：
text-decoration: underline solid #007bff（顺序：线型、线色、线宽不在此处设） - 想控制粗细？不行 ——
text-decoration-thickness是新属性（Chrome 95+、Firefox 96+），可设text-decoration-thickness: 2px或auto - 颜色继承自
color，除非显式指定；若要独立配色，必须写全text-decoration: underline #ff6b6b - 旧项目兼容方案：用
border-bottom模拟，例如border-bottom: 1px solid #999，但注意它会撑高行高
hover 下划线动画怎么做才自然
直接对 text-decoration 做 transition 是无效的 —— 这个属性不支持过渡动画。得换思路。
- 用
border-bottom+transform: scaleX(0)配合origin实现从左到右划入效果 - 关键代码片段：
a { text-decoration: none; position: relative; } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #007bff; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } a:hover::after { transform: scaleX(1); } - 别忘了给
a加position: relative，否则::after无法精确定位 - 移动端点击反馈弱？补上
touch-action: manipulation提升响应感
text-decoration-skip-ink 是干啥的，开了有啥影响
这个属性控制下划线是否避开文字的「墨水区域」（比如小写字母 g、j、y 的下延部分）。默认值是 auto，现代浏览器基本都跳过，但某些字体或字号下仍可能切到字形里。
立即学习“前端免费学习笔记（深入）”；
- 设成
text-decoration-skip-ink: none会让下划线变成一条直通到底的横线，适合强调一致性（如法律条文链接） - 设成
text-decoration-skip-ink: auto更可读，但 Firefox 目前只支持auto，不支持none - 它不影响
border-bottom，纯属text-decoration体系内的微调 - 实际项目中，除非设计稿明确要求「下划线必须穿透字母」，否则不用动它
最易被忽略的是继承链和 display 类型对 text-decoration 的隐式破坏 —— 看似简单的下划线，真正在复杂布局里稳定显示，往往要查三层祖先样式、两次重绘触发条件、一次伪元素定位偏移。
