在网页设计中，发挥文本内容的视觉效果是非常重要的。为了使文本内容更具可读性和美感，经常使用css代码添加一些样式来美化文本，比如下划线，特殊字体，粗体等等。在此您将学习如何使用css代码添加文本水平下划线。

/* 为文本添加下划线 */
.text-underline {
text-decoration: underline;
}

上面的css代码通过text-decoration属性为文本内容添加了下划线。此外，您还可以使用其他的text-decoration属性值，如dashed，dotted，double等，让下划线的样式更加丰富。

/* 为文本添加虚线样式下划线 */
.text-dotted-underline {
text-decoration: underline dotted;
}
/* 为文本添加双下划线样式 */
.text-double-underline {
text-decoration: underline double;
}

除了以上样式以外，您还可以为文本内容添加自定义的下划线样式。比如，可以使用background-image属性为文本添加图片作为下划线。

/* 为文本添加图片作为下划线 */
.text-image-underline {
text-decoration: none;
background-image: url('underline.png');
background-position: 0 100%;
background-repeat: repeat-x;
background-size: auto 2px;
}

上述代码实现了使用一张underline.png图片作为下划线的样式，并使用了background-position，background-repeat，background-size属性来控制图片的展示效果。这样的自定义下划线样式可以让您在页面设计中更加自由地展示文本内容。

以上就是css文字水平线下划线的相关内容，希望对您有所帮助！