使用CSS的text-decoration属性可为文本添加下划线、删除线等效果，其值包括underline、line-through和none，分别用于添加下划线、贯穿线和去除装饰；通过组合多个值能同时应用多种线条，还可结合text-decoration-color、style和thickness属性自定义颜色、样式与粗细。
如果您希望对网页中的文本添加下划线、删除线或其他装饰效果，可以使用CSS的text-decoration属性来实现样式控制。以下是关于该属性的具体使用方法：
本文运行环境：MacBook Pro，macOS Sonoma
一、设置文本下划线
text-decoration属性可以通过设定underline值为文本添加下划线，常用于链接或强调内容的视觉表现。
1、在CSS选择器中添加text-decoration: underline;声明。
立即学习“前端免费学习笔记（深入）”；
2、将该样式应用到目标HTML元素，例如<span>或<a>标签。
3、浏览器渲染后，对应文本下方会出现一条直线。默认情况下下划线颜色与文本颜色一致。
二、添加删除线效果
通过设定line-through值，可以在文本中间绘制一条贯穿线，适用于价格折扣或作废内容的展示。
1、编写CSS规则：text-decoration: line-through;。
2、将其绑定至需要显示删除线的元素上。
3、页面加载时，元素内的文字会呈现被划掉的样式。此效果可用于促销信息中标注原价。
三、去除默认文本装饰
某些HTML元素如锚点标签自带下划线，可通过none值清除所有装饰线条以自定义样式。
1、为目标元素设置text-decoration: none;规则。
2、确保该样式优先级高于浏览器默认样式表。
3、刷新页面后原始下划线消失，便于后续使用border-bottom等替代方案定制外观。这是制作自定义链接样式的常用前提步骤。
四、同时应用多种装饰类型
text-decoration支持多个关键字组合，允许在同一文本上叠加多种线条效果。
1、在声明中并列书写多个有效值，例如text-decoration: underline overline line-through;。
2、注意书写顺序不影响最终渲染结果，所有指定样式将同时生效。
3、目标文本会同时显示上方线、中间线和下方线。多层装饰适用于特殊排版需求但应谨慎使用以免影响可读性。
五、自定义装饰线条颜色与样式
现代浏览器支持通过text-decoration-color、text-decoration-style和text-decoration-thickness属性精细化控制装饰线外观。
1、先设定基础装饰类型如text-decoration: underline;。
2、追加text-decoration-color: red;改变线条颜色。
3、使用text-decoration-style: wavy;将直线变为波浪线。
4、通过text-decoration-thickness: 2px;调整线条粗细。这些扩展属性需配合主属性共同使用才能完整生效。
