CSS 下划线：text-decoration、颜色、偏移与去除

如何用 CSS 给文字加下划线

text-decoration: underline 在文字下方画一条线。除非你另外指定颜色，这条线会使用文字颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

第二行用 text-decoration 简写设置了线的类型、样式和颜色，再用各自的属性设置粗细和偏移。规范也允许把粗细写进简写，但只要写进去，Safari 就会丢弃整条声明，所以要单独写 text-decoration-thickness。

text-decoration 相关属性

text-decoration 是前四个属性的简写，但不要把粗细写进去：Safari 会忽略包含粗细的 text-decoration 声明。text-underline-offset 是独立的，必须单独写。

样式、颜色和粗细

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

移动下划线：text-underline-offset

默认情况下，这条线紧贴着字母，遇到 g、p、y 这类下行字母时会断开绕过。text-underline-offset 能把它往下推，用在标题和链接上通常看起来更清爽：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

下行字母周围的断口来自 text-decoration-skip-ink: auto，它默认开启。把它设为 none 就能得到一条连续的线。

去掉链接的下划线

链接的下划线来自浏览器的默认样式表。text-decoration: none 可以去掉它。因为很多读者靠下划线找链接，所以要在悬停和键盘聚焦时把它加回来，并给链接设置一个和正文不同的颜色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

导航栏和按钮可以去掉下划线，因为它们的位置本身就说明了“这是链接”。但在段落正文里，要保留下划线。关于链接状态的更多内容见 hover 页面。

上划线和删除线

text-decoration-line 也可以在文字上方或中间画线，并且可以接受多个值：

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

用 CSS 画的删除线只是视觉效果。如果文字是被删除的内容（改过的价格、移除的条目），要像 HTML 下划线页面所示那样用 <s> 或 <del> 标记，让含义体现在标记里，而不只是体现在样式上。

常见错误

• 为了样式用 <u> 加下划线。<u> 用于标记与众不同的文字，比如拼写错误。要做带样式的下划线，用 CSS。
• 给不是链接的文字加下划线。读者会尝试点击它。要强调内容，改用粗体、颜色或背景。
• 去掉正文链接的下划线却没有提供其他提示。对分辨不出颜色差异的读者来说，只靠颜色是不够的。
• 试图在子元素上去掉父元素的下划线。无法从内部撤销；要么修改父元素，要么把子元素设为 inline-block。
• 以为 text-underline-offset 能写进简写。它是一个独立的属性。
• 把粗细写进简写。text-decoration: underline 2px 在 Chrome 和 Firefox 中有效，但 Safari 会丢弃整条声明。使用 text-decoration-thickness。