使用 text-decoration 可设置链接下划线，通过 line、color、style、thickness 实现精细控制；2. 自定义样式如蓝色虚线并悬停加粗可提升体验；3. 用 border-bottom 替代可避免穿过 descender，视觉更整洁。
在网页设计中，链接的视觉表现很重要，使用 CSS text-decoration 属性可以轻松为文本添加下划线，并进一步美化链接样式，使其更具吸引力和可用性。
基本下划线设置
通过 text-decoration: underline 可以为链接添加默认下划线。这是链接最常见的样式，浏览器通常默认启用。
a {text-decoration: underline;
}
但默认下划线可能显得生硬。CSS 提供了更精细的控制方式：
- text-decoration-line：指定装饰类型（如 underline、overline、line-through）
- text-decoration-color：设置下划线颜色
- text-decoration-style：定义线条样式（实线、虚线、波浪线等）
- text-decoration-thickness：调整下划线粗细
美化链接下划线示例
想要让链接更现代，可以自定义下划线样式。例如，使用较细的蓝色虚线下划线：
立即学习“前端免费学习笔记（深入）”；
a {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: #007acc;
text-decoration-thickness: 1px;
transition: text-decoration-thickness 0.2s;
}
a:hover {
text-decoration-thickness: 2px;
}
这样在鼠标悬停时，下划线会变粗，带来轻微动态反馈，提升用户体验。
替代方案：使用 border-bottom
有时使用 border-bottom 比 text-decoration 更灵活，特别是需要精确控制间距时：
a {text-decoration: none;
border-bottom: 2px solid #005a9e;
padding-bottom: 2px;
}
这种方法避免了下划线穿过字母 descender（如 g、p）的问题，视觉上更整洁。
基本上就这些。合理使用 text-decoration 或 border-bottom，能让链接既清晰又美观。
