css下划线怎么出现

CSS下划线是网页设计中常用的一种效果，可以为文本内容增加一份重要性和美观度。那么CSS下划线又是怎么出现的呢？

.text {
    text-decoration: underline;
} 

在CSS中，text-decoration属性可以用来控制文本的修饰效果，如下划线、删除线等。在这里，我们使用text-decoration: underline来添加下划线效果。

除了可以添加下划线，text-decoration属性还支持其他可选值，如none（无修饰线）、line-through（添加删除线）等。此外，该属性还支持使用缩写属性text-decoration-line、text-decoration-style、text-decoration-color来单独设置下划线的样式、颜色。

.text {
    text-decoration-line: underline;
    text-decoration-color: red;
} 

在以上代码中，我们将text-decoration-line设为underline，将文本添加下划线。同时，将text-decoration-color设为red，使下划线颜色为红色。

除了使用text-decoration属性来添加下划线，我们还可以使用border-bottom属性来实现下划线效果。代码如下：

.text {
    border-bottom: 1px solid black;
} 

在这里，我们通过设置border-bottom来让文本下方产生一条1像素宽的黑色实线。当然，我们同样可以使用border-bottom-style、border-bottom-color来单独设置下划线的样式和颜色。

总之，CSS下划线是通过text-decoration属性或border-bottom属性来实现的。当然，我们还可以在下划线效果之上添加其他装饰效果，如颜色、线条宽度、及其材质等。在实际应用中，根据需要选用不同的方法，制作出专业的美观页面。