CSS字体下划线如何添加_CSS字体下划线添加技巧汇总

首选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

，也能实现自定义下划线的效果。这种方法比较灵活，可以实现一些复杂的下划线样式，比如渐变色下划线。

Keeva AI

AI一键生成数字人营销视频

68

查看详情

如何控制下划线与文字之间的距离？

默认情况下，下划线和文字会紧挨着，有时候看起来不太舒服。想要调整它们之间的距离，可以用

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字体下划线的方法有很多，选择哪种取决于你的具体需求和想要实现的效果。灵活运用这些技巧，就能让你的文字更加美观和个性化。