在CSS中设置文字下划线有多种实现方式，不同的方法对应不同的样式控制能力，开发者可以根据实际需求选择合适的技术方案。
使用text-decoration属性设置下划线
这是最基础的下划线设置方式，text-decoration属性是CSS中专门用于控制文本装饰线的属性，默认支持添加下划线、上划线、删除线等效果。
基础语法如下：
/* 给类名为text-underline的元素添加下划线 */
.text-underline {
text-decoration: underline;
}
该属性还支持同时设置下划线的颜色、样式，语法格式为text-decoration: line-style color，示例如下：
/* 红色虚线下划线 */
.red-dashed-underline {
text-decoration: dashed red underline;
}
/* 蓝色双线下划线 */
.blue-double-underline {
text-decoration: double blue underline;
}
常用的下划线样式值包括：
- underline：实线下划线，默认值
- dashed：虚线下划线
- dotted：点状下划线
- double：双线下划线
- wavy：波浪线下划线
使用border-bottom属性设置下划线
如果需要更灵活控制下划线的位置、粗细，或者需要下划线和文字之间有一定的间距，可以使用border-bottom属性模拟下划线效果。
基础实现示例如下：
/* 用底部边框模拟下划线 */
.border-underline {
border-bottom: 1px solid #333;
/* 去掉默认的下边框影响，让下划线更贴近文字 */
padding-bottom: 2px;
/* 可选：去掉链接默认的下划线，避免重复 */
text-decoration: none;
}
这种方式的优势在于可以单独控制下划线的粗细、颜色、样式，还能通过padding-bottom调整下划线和文字的间距，比如设置padding-bottom: 5px就可以让下划线离文字更远一些。
使用背景渐变设置下划线
如果需要实现渐变颜色的下划线，或者下划线有特殊的长度、位置要求，可以使用background属性的线性渐变来模拟下划线。
示例如下：
/* 渐变色下划线 */
.gradient-underline {
background: linear-gradient(to right, #ff0000, #00ff00) no-repeat;
/* 设置背景的高度为下划线粗细 */
background-size: 100% 2px;
/* 设置背景位置在文字底部 */
background-position: 0 100%;
/* 去掉默认下划线 */
text-decoration: none;
/* 可选：调整下划线和文字的间距 */
padding-bottom: 3px;
}
这种方式可以实现单色无法达到的渐变效果，还能通过background-size控制下划线的长度，比如设置background-size: 80% 2px就可以让下划线比文字宽度短一些。
不同方法的适用场景对比
以下是三种常见下划线设置方法的特性对比：
| 实现方式 | 样式控制能力 | 适用场景 |
|---|---|---|
| text-decoration属性 | 基础，支持修改颜色、样式 | 简单的下划线需求，不需要调整位置和间距 |
| border-bottom属性 | 强，可控制粗细、间距、样式 | 需要自定义下划线位置、间距，或者下划线和文字有间隔的场景 |
| 背景渐变 | 极强，支持渐变、自定义长度 | 需要渐变下划线，或者下划线长度不符合文字宽度的特殊场景 |
注意事项
如果是对<a>标签设置下划线，需要注意浏览器默认会给<a>标签添加text-decoration: underline样式，如果自定义下划线，需要先重置默认样式：
/* 重置a标签默认下划线 */
a {
text-decoration: none;
}
/* 自定义a标签下划线 */
a.custom-underline {
border-bottom: 1px solid #0066cc;
padding-bottom: 1px;
}
另外，使用text-decoration属性设置的下划线会和文字的基线对齐，而border-bottom模拟的下划线位置可以通过padding-bottom自由调整，开发者可以根据设计稿的要求选择对应的实现方式。
cssunderlinetext_decoration下划线修改时间：2026-06-27 23:57:26