CSS通过text-decoration属性实现文本装饰，可设置下划线、删除线、上划线及样式、颜色、粗细；常用于去除链接默认下划线并自定义悬停效果，结合text-decoration-skip-ink控制下划线是否穿过字母下方，提升可读性与美观度。
CSS字体文本装饰，简单来说，就是给文字加点“料”，让它们看起来更有个性。比如，加个下划线，或者来个删除线，甚至加个上划线，都是文本装饰的范畴。
添加CSS字体文本装饰，主要通过
text-decoration属性来实现。
解决方案
直接使用
text-decoration属性，可以设置文本的线条样式、颜色和粗细。
立即学习“前端免费学习笔记（深入）”；
/* 设置下划线 */
.underline {
text-decoration: underline;
}
/* 设置删除线 */
.line-through {
text-decoration: line-through;
}
/* 设置上划线 */
.overline {
text-decoration: overline;
}
/* 组合使用，例如下划线和删除线 */
.underline-and-line-through {
text-decoration: underline line-through;
}实际上，
text-decoration是一个简写属性，它包含了
text-decoration-line、
text-decoration-color和
text-decoration-style。 所以，更精细的控制可以这样写：
.custom-decoration {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy; /* 可以是solid, double, dotted, dashed, wavy */
text-decoration-thickness: 3px; /* 控制线条粗细 */
}为什么text-decoration: none;
总是被用到？
text-decoration: none;最常见的用途是移除链接的默认下划线。 浏览器默认会给
<a>标签添加下划线，但很多时候，设计师并不喜欢这种默认样式。
a {
text-decoration: none; /* 移除链接的下划线 */
color: blue; /* 设置链接颜色 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停时添加下划线 */
}这样，链接在默认状态下没有下划线，鼠标悬停时才会显示，这是一种常见的交互方式。
text-decoration-skip-ink
有什么作用？
text-decoration-skip-ink属性用于指定文本装饰线是否穿过字形的墨迹部分。 默认情况下，文本装饰线可能会穿过字母的下降部分（比如g, p, q, y），这在某些字体和设计中可能不太美观。
.skip-ink {
text-decoration: underline;
text-decoration-skip-ink: auto; /* 默认值，允许穿过 */
}
.no-skip-ink {
text-decoration: underline;
text-decoration-skip-ink: none; /* 禁止穿过 */
}text-decoration-skip-ink: none;会强制线条穿过字母，而
text-decoration-skip-ink: auto;则让浏览器自行决定是否穿过，通常会避免穿过。
这个属性对于提升文本的可读性和美观性非常有用，特别是在使用特殊字体或者设计风格时。 不过，需要注意的是，并非所有浏览器都完全支持这个属性，所以在使用时最好进行兼容性测试。
