使用 CSS 为文本添加下划线

简介

下划线是一种经典的文本装饰方式，可以用于强调、链接等等多种情况。相比于直接在文本后面添加下划线，使用 CSS 样式可以更加灵活，可以控制下划线的宽度、颜色、位置等等。本文将介绍如何使用 CSS 样式为文本添加下划线。

实现方式

首先，需要明确的是，实现文本下划线的常用方式有两种：

1. 使用 CSS text-decoration 属性，这是一种最常用的方式，可以添加下划线、删除线、上划线等等多种装饰线。

2. 使用 CSS border-bottom 属性，这是一种比较少用的方式，但也可以实现文本下划线的效果。

接下来，我们分别介绍这两种方式的实现方法。

text-decoration 属性

text-decoration 是一种用于装饰文本的 CSS 属性，可以用于添加下划线、删除线、上划线等等多种装饰线。其中，添加下划线的方式如下：

text-decoration: underline;

这样就能够为文本添加一个默认样式的下划线了。如果需要控制下划线的宽度、颜色、位置等等，可以使用下面的方式：

/* 设置下划线颜色为红色 */
text-decoration-color: red;

/* 设置下划线宽度为 2px */
text-decoration-thickness: 2px;

/* 设置下划线样式为双下划线 */
text-decoration-line: underline double;

/* 设置下划线位置为文本的下面 */
text-decoration-skip-ink: none;

需要注意的是，以上样式不是所有浏览器都支持，尤其是 text-decoration-thickness 和 text-decoration-skip-ink 属性，如果需要支持更多浏览器，可以使用下面的写法：

/* 将所有属性写在一起 */
text-decoration: underline red 2px underline double none;

具体的样式值可以根据实际需求进行调整。

border-bottom 属性

另一种实现文本下划线的方式是使用 border-bottom 属性，具体的样式设置如下：

/* 设置下划线样式为实线 */
border-bottom-style: solid;

/* 设置下划线宽度为 2px */
border-bottom-width: 2px;

/* 设置下划线颜色为红色 */
border-bottom-color: red;

需要注意的是，这种方式需要设置 display 属性为 inline 或 inline-block，否则无法生效，代码如下：

display: inline-block;
border-bottom: 2px solid red;

总结

本文介绍了两种实现文本下划线的方式，使用 CSS text-decoration 属性和 border-bottom 属性，具体的样式设置可以根据实际需求进行调整。需要注意的是，样式不是所有浏览器都支持，需要根据实际情况进行测试和调整。