CSS字体文本装饰如何添加_CSS字体文本装饰添加教程-css教程-PHP中文网

CSS字体文本装饰如何添加_CSS字体文本装饰添加教程

星夢妙者

发布： 2025-09-05 19:59:01

原创

322人浏览过

CSS通过text-decoration属性实现文本装饰，可设置下划线、删除线、上划线及样式、颜色、粗细；常用于去除链接默认下划线并自定义悬停效果，结合text-decoration-skip-ink控制下划线是否穿过字母下方，提升可读性与美观度。

css字体文本装饰如何添加_css字体文本装饰添加教程

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;

登录后复制

总是被用到？

文心智能体平台

百度推出的基于文心大模型的Agent智能体平台，已上架2000+AI智能体

查看详情

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; /* 禁止穿过 */
}

登录后复制