CSS可以用来给文字添加下划线，让文字看起来更加突出、有重要感。下面从多个方面来详细阐述如何使用CSS给文字添加下划线。
一、基本用法
最基本的用法是给文字添加一条下划线，可以通过text-decoration属性来实现。
p {
text-decoration: underline;
}
上述代码将会给所有p元素添加下划线。如果只想给某个元素添加下划线，可以通过ID或者class来进行选择。
#myId {
text-decoration: underline;
}
.myClass {
text-decoration: underline;
}
当然，还可以通过伪类来选择需要添加下划线的元素，比如给链接添加下划线：
a:hover {
text-decoration: underline;
}
二、下划线样式
默认情况下，下划线样式是实线，但是CSS提供了多种下划线样式供选择，可以通过text-decoration-style属性来设置下划线样式。
p {
text-decoration: underline;
text-decoration-style: dotted;
}
上述代码将会给所有p元素添加一个点线下划线。
text-decoration-style属性提供的下划线样式有：solid(实线，default)、double(双线)、dotted(点线)、dashed(虚线)、wavy(波浪线)。
三、下划线颜色
除了样式外，下划线的颜色也可以进行设置，可以通过text-decoration-color属性来实现。
p {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: red;
}
上述代码将会给所有p元素添加一个红色的点线下划线。
四、下划线位置
默认情况下，下划线是在文字下方，但是CSS提供了一些属性来控制下划线的位置。
text-decoration-line属性可以设置下划线的位置，它有如下可选值：
- underline(默认值)：下划线在文字下方；
- overline：下划线在文字上方；
- line-through：下划线穿过文字中间。
p {
text-decoration: underline;
text-decoration-line: overline;
text-decoration-color: red;
}
上述代码将会给所有p元素添加一个在文字上方的红色下划线。
同时，text-underline-position属性可以控制下划线的粗细，它有如下可选值：
- auto(默认值)：下划线位于基线下面，推荐使用；
- under：下划线位于基线下面，与自动一样；
- left：下划线位于文字左侧；
- right：下划线位于文字右侧；
- inherit：继承父元素的下划线位置。
p {
text-decoration: underline;
text-underline-position: left;
}
上述代码将会给所有p元素添加一个在文字左侧的下划线。
五、小结
CSS可以轻松地给文字添加下划线，不仅仅可以控制下划线的样式，颜色和位置，还可以根据不同的需求进行设置，达到更好的视觉效果。