首选text-decoration:underline实现下划线，若需自定义颜色、样式或间距，可采用border-bottom、box-shadow或linear-gradient模拟；通过text-underline-offset调整下划线与文字距离，用position或box-shadow避免影响行高。
CSS字体下划线，简单来说，就是给你的文字加上一条横线，让它看起来像链接一样，但不仅仅是链接才能有下划线哦！方法其实挺多的，效果也各有千秋。
text-decoration: underline; 绝对是首选，简单粗暴，一行代码搞定。但有时候，你可能想要更精细的控制，比如下划线的颜色、粗细、位置等等，那就需要更高级的技巧了。
text-decoration: underline;
如何自定义CSS下划线的颜色和样式？
想要让下划线更个性化，
text-decoration可能就有点力不从心了。这时候，可以考虑用
border-bottom来模拟下划线。这样，你就可以随心所欲地设置颜色、粗细，甚至虚线、点线等等。
立即学习“前端免费学习笔记（深入）”；
.underline {
border-bottom: 2px dashed red; /* 红色虚线下划线 */
}当然，用
box-shadow也能实现类似的效果，而且可以做出一些更酷炫的阴影效果，让下划线看起来更立体。
还有一种方法是使用
linear-gradient作为
background-image，也能实现自定义下划线的效果。这种方法比较灵活，可以实现一些复杂的下划线样式，比如渐变色下划线。
如何控制下划线与文字之间的距离？
默认情况下，下划线和文字会紧挨着，有时候看起来不太舒服。想要调整它们之间的距离，可以用
text-underline-offset属性。这个属性可以设置下划线相对于文字的偏移量，让它们之间留出一定的空间。
.underline {
text-decoration: underline;
text-underline-offset: 5px; /* 下划线向下偏移5像素 */
}如果使用
border-bottom模拟下划线，可以通过调整
padding-bottom来控制距离。
如何避免下划线影响行高？
有时候，下划线可能会影响到行高，导致文字上下间距不一致。为了解决这个问题，可以尝试使用
position: relative和
bottom属性来微调下划线的位置。
.underline {
position: relative;
bottom: -2px; /* 将下划线向上微调2像素 */
border-bottom: 1px solid black;
}另外，使用
box-shadow模拟下划线也能避免这个问题，因为它不会占据额外的空间。
总之，添加CSS字体下划线的方法有很多，选择哪种取决于你的具体需求和想要实现的效果。灵活运用这些技巧，就能让你的文字更加美观和个性化。
