[分享]css3文字加下划线

CSS（Cascading Style Sheets）是一种用于定义网页的样式和布局的技术。CSS3是CSS技术的最新版本，它引入了很多新的特性和样式，其中就包括文字下划线的实现方式。CSS3支持多种...

CSS（Cascading Style Sheets）是一种用于定义网页的样式和布局的技术。CSS3是CSS技术的最新版本，它引入了很多新的特性和样式，其中就包括文字下划线的实现方式。

CSS3支持多种方式实现文字下划线，其中最常用的方法是使用text-decoration属性。text-decoration属性可以设置文字的装饰效果，包括下划线、删除线等。

.text-underline {
    text-decoration: underline;
} 

以上代码将会实现普通的下划线效果。如果要进一步调整下划线的样式，可以使用text-decoration-line属性。

.text-underline {
    text-decoration: underline;
    text-decoration-line: double;
} 

以上代码将会实现双下划线效果，同理，还可以实现波浪线、点线等不同的下划线样式。

另外，CSS3还支持在下划线中加入文字或图标。这可以通过伪元素:before或:after实现，以下代码将会在下划线后面添加一个心形图标。

.text-icon {
    text-decoration: underline;
    position: relative;
}
.text-icon:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 15px;
    height: 15px;
    background: url(heart.png) no-repeat;
    background-size: contain;
} 

以上代码需要在HTML中添加一个class为"text-icon"的元素，并且引入一张名称为"heart.png"的图片，图片将会作为下划线的图标。

综合以上内容，我们可以看到CSS3提供了很多丰富的样式和方法，使我们在实现页面样式时更加灵活方便。