文字属性-下划线

1. 基础下划线： text-decoration: underline

.underline {
  text-decoration: underline;
}

这是最基础的下划线方式。

2. 更精细的控制： text-decoration 相关属性

CSS 提供了多个子属性来控制下划线：

/* 简写方式 */
.text {
  text-decoration: underline wavy red 2px;
}

/* 分开设置 */
.text {
  text-decoration-line: underline;         /* 下划线 */
  text-decoration-style: solid;            /* 样式: solid | wavy | dotted | dashed | double */
  text-decoration-color: red;              /* 颜色 */
  text-decoration-thickness: 2px;          /* 粗细 */
}

3. 下划线与文字的距离： text-underline-offset

.offset-underline {
  text-decoration: underline;
  text-underline-offset: 5px;  /* 下划线距离文字底部的距离 */
}

4. 防下划线穿过字母降部： text-underline-position

.position-underline {
  text-decoration: underline;
  text-underline-position: under;  /* 避开字母降部 (如 g, j, p, q, y) */
}
/* 
  可选值: auto | under | from-font | left | right
  常用 under：防止下划线穿过字母降部
*/

对比效果：

• auto （默认）：下划线会穿过 g、j、y 等字母的尾部
• under ：下划线在字母降部下方，更美观

5. 自定义下划线（用 border-bottom 模拟）

这种方式可控制空间更大：

.custom-underline {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.custom-underline:hover {
  border-bottom-color: blue;
  /* 可做悬停动效 */
}

6. 用 background 实现更炫酷的下划线

.fancy-underline {
  text-decoration: none;
  background-image: linear-gradient(to right, blue, purple);
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
}

.fancy-underline:hover {
  background-size: 100% 100%;  /* 悬停填充整个文字背景 */
  color: white;
}

7. 移除下划线

.no-underline {
  text-decoration: none;
}
/* 常用在 a 标签上去掉默认下划线 */
a {
  text-decoration: none;
}

8. 实际应用示例

/* 链接基础样式 */
a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: border-bottom-color 0.2s;
}

a:hover {
  border-bottom-color: transparent;
}

/* 文章正文下划线强调 */
em {
  text-decoration: underline wavy #ff6b6b;
  text-underline-offset: 3px;
}

/* 导航激活状态下划线动画 */
.nav-link {
  text-decoration: none;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

9. 推荐做法

10. 总结

text-decoration: underline 是最基础的方式，但如果需要更精细的控制，可以使用 text-underline-offset 、 text-decoration-thickness 等属性，或者用 border-bottom / background / ::after 来自定义实现更灵活的效果。