当前位置：首页 > 文章列表 > 文章 > 前端 > 标签用于添加下划线文本，但CSS更推荐使用。

标签用于添加下划线文本，但CSS更推荐使用。

2025-08-18 14:59:31 0浏览收藏

解决方案

要给文本添加下划线，最直接且推荐的方式是使用CSS的text-decoration属性。

下划线示例

这是一段使用CSS添加了下划线的文本，这是最常见的方式。

这个词 teh 可能是个拼写错误，所以我们用了语义化的 `u` 标签。注意，它本身也有下划线，但更多是传达信息。

来点更有趣的：鼠标悬停有动画的下划线，这完全是CSS的魔法。

为什么不直接用标签来加下划线？

哦，这可真是个老生常谈的话题了。早些年，标签确实就是用来简单粗暴地给文本加下划线的。那时候，HTML的任务还比较“纯粹”，就是描述内容长什么样。但随着网页变得越来越复杂，人们发现把内容结构和表现形式混在一起简直就是个灾难。你想想看，如果你的网站有几百页，突然老板说所有下划线都得变成虚线，你是不是得一页一页改HTML？想想都头大。

所以，HTML5时代，大家达成了一个共识：HTML负责内容的语义和结构，CSS负责内容的表现和样式。标签因为其纯粹的“表现性”被一度“打入冷宫”，甚至被建议不要再用。后来，它又被“特赦”了，但赋予了新的语义：表示非文本注释。比如，一个拼写错误的词，或者一段原本没有强调，但因为某种原因（比如法律文本中的某个条款引用）需要特别指出、但又不属于超链接的内容。

从开发者的角度看，用CSS来控制下划线，无论是颜色、粗细、位置，还是鼠标悬停时的动态效果，都灵活得不是一点半点。而且，一个样式表就能控制整个网站的下划线风格，维护起来简直不要太爽。你用标签？那你就只能得到一个浏览器默认的、毫无个性的下划线，想改？对不起，你得用CSS覆盖它，那不就绕了一圈又回来了吗？所以，除非你有明确的语义需求，否则别再想着用标签来做纯粹的视觉下划线了。

那么，标签现在到底该怎么用？

既然标签被重新定义了，那它肯定不是摆设。它现在主要用于那些需要视觉上加下划线，但又不是超链接，并且有特定语义的场景。想想看，在纸质书里，我们可能会用下划线来标记一些特别的地方，比如：

拼写错误或校对标记： 你写了一段文字，发现里面有个单词拼错了，或者编辑在校对时标记出需要修改的地方。
```
这个词 teh 应该写成 "the"。
```
这里我加了个text-decoration-color，只是为了更直观地表现“错误”的含义，但核心是标签传递的“这是一个被标记的词”的语义。
专有名词或特定术语： 在某些文档或学术论文中，为了强调或区分，可能会对特定领域的专有名词加下划线。
```
在研究中，我们使用了 量子纠缠 的原理。
```
这里用虚线，只是为了展示CSS可以控制下划线样式，但的语义在于强调“量子纠缠”这个专有名词。
非文本注释： 比如在法律条文或者代码注释中，标记一些非文字内容，或者一些需要特别注意的备注。

简单来说，如果你的下划线是为了告诉用户“这个词/短语有特别的含义，但它不是一个链接”，那么标签就有了它的用武之地。但请记住，它依然会默认带下划线，如果你想改变下划线的样式，还是得依赖CSS。它的价值在于语义，而不是视觉。

除了简单的下划线，CSS还能玩出什么花样？

CSS在文本装饰这块，可比你想象的要强大得多。text-decoration这个属性，远不止underline那么简单。我们可以控制下划线的颜色、样式、粗细，甚至让它动起来。

控制下划线颜色和样式：text-decoration-color 可以改变下划线的颜色。 text-decoration-style 可以让下划线变成虚线（dashed）、点线（dotted）、双线（double）或者波浪线（wavy）。 text-decoration-thickness 则能控制下划线的粗细。
```
.fancy-underline {
    text-decoration: underline;
    text-decoration-color: purple; /* 紫色下划线 */
    text-decoration-style: wavy; /* 波浪线 */
    text-decoration-thickness: 2px; /* 粗一点 */
}
```
这些组合起来，就能玩出很多不同的视觉效果了。
下划线偏移（text-underline-offset）： 有时候默认的下划线离文字太近了，看着不舒服。这个属性就能让你调整下划线和文字之间的距离。
```
.offset-underline {
    text-decoration: underline;
    text-underline-offset: 5px; /* 下划线离文字远一点 */
}
```
更高级的自定义：伪元素或背景渐变 如果这些还不够，我们还可以用伪元素（::after 或 ::before）或者背景渐变（background-image）来模拟和创建完全自定义的下划线。这通常用于实现一些特殊的设计，比如鼠标悬停时下划线从左到右滑入的效果，或者渐变色的下划线。
前面解决方案里那个“鼠标悬停有动画的下划线”就是用伪元素实现的。它通过transform: scaleX(0)让下划线默认不可见，鼠标悬停时scaleX(1)让它伸展开来，看起来就像画上去的一样。
用背景渐变则可以做出更复杂的图形，比如：
```
.gradient-underline {
    background-image: linear-gradient(to right, red, blue); /* 红色到蓝色的渐变 */
    background-repeat: no-repeat; /* 不重复 */
    background-position: 0 100%; /* 放在底部 */
    background-size: 100% 2px; /* 宽度100%，高度2px */
    text-decoration: none; /* 移除默认下划线 */
}
```
这种方式虽然看起来复杂一点，但它给予了你对下划线造型的终极控制权。所以说，只要你敢想，CSS就能帮你把下划线玩出花来。