1. 前言
CSS中设置下划线是前端开发中的常见需求。下划线也是一种常用的视觉效果，可以用于链接、标题等元素上。下面我们将介绍几种在CSS中设置下划线的方法。
2. 使用文本装饰线
下划线也只是一种文本装饰线，所以我们可以通过设置文本装饰线的样式来实现下划线效果。
2.1 使用text-decoration属性
text-decoration属性可以设置文本的装饰线，包括下划线、删除线、上划线等。
/* 设置下划线样式 */
.underline{
text-decoration: underline;
/* 可选颜色属性 */
text-decoration-color: red;
/* 可选线型属性 */
text-decoration-style: dashed;
/* 可选位置属性 */
text-decoration-line: underline;
}
上面的示例中，我们设置了文本的下划线样式，并且还可以通过text-decoration-color、text-decoration-style、text-decoration-line属性分别设置下划线的颜色、样式和位置。
2.2 使用border-bottom样式
我们也可以使用border样式来实现下划线效果。
/* 设置边框下划线样式 */
.border-bottom{
border-bottom: 1px solid red;
}
上面的代码中，我们设置了元素的底部边框为红色实线，通过调整border-bottom的宽度和样式，我们可以设置不同的下划线效果。
3. 使用伪元素
我们还可以使用CSS伪元素来实现下划线效果。通过伪元素，我们可以在元素的内容前面或者后面添加样式，从而实现下划线效果。
3.1 使用:before和content属性
我们可以使用:before伪元素和content属性来实现下划线效果。
/* 设置::before伪元素下划线样式 */
.before{
position: relative;
display: inline-block;
}
.before::before{
content: "";
position: absolute;
height: 1px;
width: 100%;
left: 0;
bottom: 0;
background-color: red;
}
上面的代码中，我们使用:before伪元素在元素前面添加了一个空元素，并设置了其高度、宽度和位置，从而生成下划线效果。我们还需要为其父元素设置position: relative，使伪元素的位置相对于父元素而非页面。
3.2 使用:after和border-bottom样式
我们也可以使用:after伪元素和border-bottom样式来实现下划线效果。
/* 设置::after伪元素下划线样式 */
.after{
position: relative;
display: inline-block;
}
.after::after{
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 0;
border-bottom: 1px solid red;
}
上面的代码中，我们使用:after伪元素在元素后面添加了一个空元素，并设置了其宽度和位置，以及底部边框的样式和宽度，从而生成下划线效果。
4. 总结
CSS中设置下划线的方法有很多，我们可以通过text-decoration属性设置文本装饰线、通过border-bottom样式设置边框下划线，还可以使用:before和:after伪元素来实现下划线效果。在具体使用时，根据不同的情况选择合适的方式来实现下划线效果。