最简写法是先清除默认下划线再hover添加：a{ text-decoration:none; } a:hover{ text-decoration:underline; }，需注意优先级、属性混用及浏览器兼容性问题。
链接 hover 时加下划线的最简写法
直接用 a:hover 配合 text-decoration: underline 就行，但要注意默认状态下链接可能已有下划线（比如 Chrome 默认是带下划线的），所以实际效果可能是“hover 前后都有线”，这不是你想要的。
a {
text-decoration: none; /* 先清除默认下划线 */
}
a:hover {
text-decoration: underline;
}为什么有时 hover 后下划线不出现
常见原因不是语法错，而是 CSS 优先级或继承干扰。比如父元素设置了 text-decoration: none 且用了 !important，子 a 的 hover 规则就可能被压制；或者用了 text-decoration-line: underline 这种更细粒度属性，但没配 text-decoration-color 或 text-decoration-style，导致在某些浏览器里渲染异常。
- 检查是否被更高优先级的选择器覆盖（如
.nav avs 单独的a:hover） - 避免混用
text-decoration和text-decoration-line等分离属性 - 旧版 Safari 对
text-decoration在伪类中的支持较弱，建议统一用复合写法
想让下划线离文字远一点或换颜色怎么办
CSS 的 text-decoration 本身不控制距离，但可以用 text-underline-offset 调整下划线与文字基线的间距，用 text-decoration-color 改颜色——这两个属性在现代浏览器中已稳定支持（Chrome 89+、Firefox 70+、Safari 15.4+）。
a:hover {
text-decoration: underline;
text-decoration-color: #007bff;
text-decoration-style: solid;
text-underline-offset: 4px;
}用 border-bottom 替代 text-decoration 可以吗
可以，而且更可控：能精确设置粗细、颜色、圆角、动画等。但要注意 border-bottom 会撑高行高（因为它是盒模型的一部分），而 text-decoration 是纯装饰、不影响布局。
立即学习“前端免费学习笔记（深入）”；
- 若链接在行内密集排布（比如导航栏），用
border-bottom可能导致行高突变或文字上移 - 动画过渡时，
text-decoration-thickness和text-underline-offset支持 CSS transition，但兼容性略差于border-bottom-width - 语义上，下划线是文本装饰，不是边框；屏幕阅读器对
text-decoration的识别也更符合可访问性预期
实际项目里，只要目标浏览器明确支持，优先用 text-decoration 系列属性——它专为这个场景设计，边界清晰，不易误伤布局。兼容性兜底时再考虑 border-bottom 方案。
