推荐使用CSS的text-decoration属性设置文字下划线,语法为text-decoration: underline,可通过class或id应用于特定元素,如span.class{ text-decoration:underline },同时可结合none、overline、line-through等值灵活控制文本修饰效果。

在HTML中设置文字下划线,推荐使用CSS的 text-decoration 属性。HTML本身不直接支持下划线样式控制,但通过CSS可以灵活实现。
text-decoration 属性基本语法
使用 text-decoration 可以为文本添加修饰效果,如下划线、删除线、上划线等。设置下划线主要用到 underline 值。
示例:
p {
text-decoration: underline;
}
这样页面中所有 标签内的文字都会带下划线。
立即学习“前端免费学习笔记(深入)”;
应用到特定元素的方法
你可以通过 class 或 id 为特定文字添加下划线:
- 给某个文字加下划线:
这段文字有下划线
- 去除已有下划线(比如链接):
a {
text-decoration: none; /* 去掉默认下划线 */
}
a:hover {
text-decoration: underline; / 鼠标悬停时显示下划线 /
}
其他 text-decoration 取值
除了 underline,该属性还支持:
- none:无装饰(常用于去除链接下划线)
- overline:上划线
- line-through:删除线(中间横线)
- 可组合使用,如:text-decoration: underline overline
注意事项
尽量避免使用过时的HTML标签 来加下划线,因为它语义不明确,不利于SEO和可访问性。现代开发应统一用CSS控制样式。
基本上就这些,用 text-decoration: underline 就能轻松实现文字下划线效果。











