可通过CSS的text-decoration属性为文字添加下划线，常用方式包括：一、内联样式直接设置underline；二、内部CSS定义class复用；三、外部CSS文件统一管理；四、用text-decoration-color和thickness自定义颜色粗细；五、用border-bottom替代默认链接下划线并增强交互。
如果您希望在HTML页面中为文字添加下划线效果，可通过CSS的text-decoration属性实现。以下是几种常用且互不依赖的实现方式：
一、使用内联样式直接设置下划线
该方法通过在HTML标签中嵌入style属性，快速为单个元素应用下划线，适用于局部、临时性样式需求。
1、在需要加下划线的文本标签（如、、 ）中添加style属性。 2、将text-decoration属性值设为underline。 立即学习“前端免费学习笔记（深入）”； 3、例如：<span style="text-decoration: underline;">这段文字带下划线</span>。 该方法将样式规则写在HTML文档的<head>内，通过class复用样式，适合同一页面多个元素统一加下划线。 1、在<head>中插入<style>标签。 2、定义一个类名，如.underline-text，并设置text-decoration: underline;。 3、在目标元素中添加class="underline-text"，例如：<p class="underline-text">这个段落整体加下划线</p>。 该方法将样式抽离为独立.css文件，便于多页面统一维护和缓存复用，适用于中大型项目。 1、新建一个https://www.php.cn/link/24d1a588657038e90477dff2b56a4d8b文件，在其中写入：.underline { text-decoration: underline; }。 2、在HTML的<head>中通过<link rel="stylesheet" href="https://www.php.cn/link/24d1a588657038e90477dff2b56a4d8b">引入该文件。 3、在HTML元素中应用对应class，例如：<em class="underline">斜体字也支持下划线</em>。 该方法利用现代CSS属性精细控制下划线外观，需注意浏览器兼容性，Chrome 89+、Edge 89+、Firefox 70+支持良好。 1、在style属性或CSS规则中同时设置text-decoration-line: underline;。 2、添加text-decoration-color属性指定下划线颜色，例如red。 3、添加text-decoration-thickness属性设定粗细，可取值如2px、auto或from-font。 4、示例内联写法：<span style="text-decoration: underline; text-decoration-color: #0066cc; text-decoration-thickness: 2px;">蓝色细下划线</span>。 超链接（<a>）默认自带下划线，若需去除原生下划线并改用border-bottom模拟，可获得更高控制自由度。 1、对<a>标签设置text-decoration: none;消除默认下划线。 2、添加border-bottom属性，例如border-bottom: 2px solid #ff6b35;。 3、为增强交互体验，可配合:hover伪类设置悬停时的下划线变化。 4、关键代码示例：a { text-decoration: none; border-bottom: 1px dashed #999; } a:hover { border-bottom: 2px solid #333; }。二、使用内部CSS定义class类选择器
三、使用外部CSS文件控制下划线样式
四、自定义下划线颜色与粗细（text-decoration-color与text-decoration-thickness）
五、移除默认链接下划线并替换为其他样式
