答案：使用text-decoration属性可为文字添加下划线或删除线，其值underline和line-through分别实现两种效果，结合text-decoration-color、style、thickness可自定义样式，相比border-bottom更语义化且随文本自然断行，适用于链接、价格删除等场景，hover状态可通过伪类控制，注意避免line-through在长文本中影响可读性。
在CSS中，要为文字添加下划线或删除线效果，我们主要依赖text-decoration这个属性。它能快速且直观地控制文本的装饰线，underline就是加下划线，而line-through则是穿过文字的删除线。理解并灵活运用它们，能让你的文本在视觉上表达出不同的状态和含义。
解决方案
要使用CSS设置文字装饰效果，你只需要在你的CSS规则中指定text-decoration属性的值。
例如，为文本添加下划线：
.my-underline-text {
text-decoration: underline;
}HTML中使用：
立即学习“前端免费学习笔记（深入）”；
<p class="my-underline-text">这是一段带有下划线的文字。</p>
如果你想为文本添加删除线：
.my-strikethrough-text {
text-decoration: line-through;
}HTML中使用：
立即学习“前端免费学习笔记（深入）”；
<p class="my-strikethrough-text">这是一段被删除的文字。</p>
有时候，我们可能需要移除默认的文字装饰，比如链接的下划线：
a {
text-decoration: none; /* 移除链接的下划线 */
}这些是最基础的用法，但实际项目中，我们往往需要更精细的控制。
如何自定义下划线的样式、颜色与粗细？
过去，text-decoration在自定义方面确实有些简陋，下划线总是那么一成不变的实线和文本颜色。但现在CSS已经进化了，我们有了更强大的控制力。我个人觉得，这些新特性极大地提升了设计师和开发者对文本表现力的掌控。
你可以使用以下几个属性来精细化你的文字装饰：
-
text-decoration-color: 设置装饰线的颜色。 -
text-decoration-style: 设置装饰线的样式，比如solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、wavy（波浪线）。 -
text-decoration-thickness: 设置装饰线的粗细。
这些属性可以单独使用，也可以作为text-decoration的简写属性的一部分。
例如，设置一条红色的波浪下划线，并且稍微粗一点：
.custom-underline {
text-decoration: underline wavy red 2px; /* 简写形式 */
/* 等同于：
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
*/
}HTML:
<p class="custom-underline">这段文字有自定义的波浪下划线。</p>
在我看来，text-decoration-thickness尤其实用，有时候默认的下划线太细，在某些字体下几乎看不清，或者和设计稿不符，这个属性就能完美解决。
text-decoration与border-bottom在实现下划线时有何区别与选择考量？
这是一个我经常被问到的问题，也是很多初学者容易混淆的地方。表面上看，border-bottom也能实现下划线效果，但它们在渲染机制和控制能力上有着本质区别。
-
渲染机制与定位：
-
text-decoration: underline的下划线是文本装饰线，它通常会紧贴文字的基线（baseline）下方，并且会随着文本的换行而自然断开并延续。它不会影响元素的盒模型布局。 -
border-bottom是盒模型的边框，它位于元素的内边距（padding）和外边距（margin）之间。它的位置相对固定，不会跟随文本基线，如果文字换行，边框仍然是元素整体的底部边框。
-
-
控制能力：
-
text-decoration系列属性（如上面提到的color,style,thickness）提供了对下划线本身的精细控制。它天生就是为文本装饰而生。 -
border-bottom则提供了更广阔的边框控制，你可以设置border-radius让边框圆角，或者使用box-shadow模拟更复杂的下划线效果。但要让它“跟随文本”断开，就需要更复杂的CSS技巧，比如为每个单词或字符添加span并应用边框，这显然不如text-decoration来得自然。
-
-
应用场景：
- 如果你只是想给文本加一个简单的、与文本颜色和粗细相关的下划线，并且希望它能随着文本自然换行和对齐，那么
text-decoration是首选。尤其是在链接、强调文本等场景。 - 如果你需要一个与文本内容无关，而是与元素整体布局相关的底部线条，或者需要更复杂的样式（如圆角、多层边框），
border-bottom会是更好的选择。比如一个卡片底部的分隔线，或者一个输入框的下边框。
- 如果你只是想给文本加一个简单的、与文本颜色和粗细相关的下划线，并且希望它能随着文本自然换行和对齐，那么
我个人的经验是，除非有特殊需求，否则优先考虑text-decoration，它更语义化，也更符合“装饰文本”的初衷。当text-decoration无法满足你的复杂设计时，再考虑border-bottom或其他更高级的技巧。
如何为鼠标悬停状态添加或移除文字装饰效果？
在交互设计中，鼠标悬停（hover）状态的文字装饰变化是提升用户体验的常见手段。比如，链接在悬停时出现下划线，或者反过来，默认有下划线的链接在悬停时下划线消失。这很简单，只需要结合:hover伪类选择器即可。
为鼠标悬停时添加下划线：
.hover-underline-text {
text-decoration: none; /* 默认无下划线 */
color: blue; /* 举例，设置文字颜色 */
cursor: pointer; /* 提示用户可交互 */
}
.hover-underline-text:hover {
text-decoration: underline; /* 悬停时显示下划线 */
text-decoration-color: orange; /* 甚至可以改变下划线颜色 */
}HTML:
<p class="hover-underline-text">鼠标移到我身上看看。</p>
移除链接的默认下划线，并在悬停时重新添加：
a {
text-decoration: none; /* 移除所有链接的默认下划线 */
color: #007bff; /* 保持链接的蓝色 */
}
a:hover {
text-decoration: underline; /* 悬停时显示下划线 */
text-decoration-color: currentColor; /* 下划线颜色与文字颜色一致 */
}这个技巧在构建导航菜单或交互式按钮时非常有用。它能清晰地向用户表明哪些元素是可点击的，同时又保持了界面的整洁。
在实际项目中，line-through常用于哪些场景？如何避免其带来的可读性问题？
line-through，也就是删除线，在视觉传达上有着非常明确的语义：表示内容已失效、已删除、已完成或旧价格。它在电商、任务管理、内容修订等场景中出镜率很高。
常见应用场景：
- 电商网站的旧价格： 当商品打折时，通常会显示原价的删除线和新的折扣价，让用户直观感受到优惠。
- 任务列表： 完成的任务项会被打上删除线，表示已完成。
- 内容修订或版本对比： 在文档修订历史中，被删除的文本会用删除线标示。
- 库存售罄： 有些网站会用删除线表示某个商品型号或尺码已售罄。
避免可读性问题：
虽然line-through语义明确，但如果使用不当，很容易影响文本的可读性。我个人在设计时会特别注意以下几点：
-
颜色和对比度： 删除线不应该和文本颜色一样深或对比度一样高，否则会显得过于突兀，甚至干扰阅读。通常我会把删除线的颜色设置得比文本颜色稍浅一些，或者使用一个柔和的灰色。
.old-price { text-decoration: line-through; color: #999; /* 浅灰色文字 */ text-decoration-color: #ccc; /* 更浅的删除线颜色 */ } -
粗细： 默认的删除线粗细通常是合适的，但如果字体特别大或特别小，可能需要通过
text-decoration-thickness进行微调。过粗的删除线会遮挡文字，过细则可能不明显。 - 字体大小和行高： 删除线会穿过文字，如果字体太小或者行高太紧凑，删除线可能会使得文字看起来很拥挤，或者与上下行的文字产生视觉冲突。确保有足够的行高，让删除线有“呼吸”的空间。
- 避免在长文本中使用： 删除线更适合短语、单词或单行文本。如果一段很长的文字都打上删除线，阅读体验会非常糟糕，用户很难快速识别出被删除的内容，甚至会误以为是排版错误。对于长篇内容的删除，更推荐直接移除内容或者使用背景色块等其他方式。
合理运用line-through，可以有效地传达信息，但始终要记住，它的主要目的是“标记”，而不是“隐藏”，所以可读性是第一位的。
