Gạch chân CSS: text-decoration, màu, khoảng cách và cách bỏ

Cách gạch chân chữ trong CSS

text-decoration: underline vẽ một đường dưới chữ. Đường này lấy màu chữ, trừ khi bạn đặt màu riêng cho nó.

<!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>

Dòng thứ hai dùng cách viết gọn text-decoration cho loại đường, kiểu và màu, rồi đặt độ dày và khoảng cách bằng các thuộc tính riêng. Đặc tả cũng cho phép ghi độ dày trong cách viết gọn, nhưng Safari bỏ qua cả khai báo khi có nó, nên hãy viết text-decoration-thickness riêng.

Các thuộc tính text-decoration

text-decoration là cách viết gọn cho bốn thuộc tính đầu, nhưng đừng đưa độ dày vào đó: Safari bỏ qua khai báo text-decoration có chứa độ dày. text-underline-offset là thuộc tính riêng và phải viết tách ra.

Kiểu, màu và độ dày

<!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>

Dời đường gạch chân: text-underline-offset

Mặc định, đường gạch nằm sát các chữ cái và chừa khoảng trống quanh phần đuôi chữ như g, p và y. text-underline-offset đẩy nó xuống thấp hơn, thường trông gọn gàng hơn trên tiêu đề và liên kết:

<!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>

Khoảng trống quanh phần đuôi chữ là do text-decoration-skip-ink: auto, được bật mặc định. Đặt nó thành none để có đường gạch liền mạch.

Bỏ gạch chân của liên kết

Liên kết được gạch chân bởi stylesheet mặc định của trình duyệt. text-decoration: none bỏ đường gạch này. Vì nhiều người đọc nhận ra liên kết nhờ gạch chân, hãy hiện lại nó khi hover và khi focus bằng bàn phím, và cho liên kết một màu khác với chữ thường:

<!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>

Thanh điều hướng và nút là chỗ hợp lý để bỏ gạch chân, vì vị trí của chúng đã cho thấy đó là "liên kết". Trong một đoạn văn, hãy giữ gạch chân. Xem thêm về các trạng thái của liên kết ở trang hover.

Gạch trên và gạch ngang

text-decoration-line cũng vẽ được đường phía trên chữ hoặc xuyên qua chữ, và nhận nhiều giá trị cùng lúc:

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

Gạch ngang bằng CSS chỉ mang tính hiển thị. Khi chữ là nội dung đã bị xóa (giá đã thay đổi, mục đã bị bỏ), hãy đánh dấu bằng <s> hoặc <del>, như trang gạch chân HTML hướng dẫn, để ý nghĩa nằm trong mã HTML chứ không chỉ ở phần định dạng.

Lỗi thường gặp

• Dùng <u> để gạch chân cho đẹp. <u> dành cho chữ được đánh dấu là khác biệt, như lỗi chính tả. Muốn gạch chân để trang trí, hãy dùng CSS.
• Gạch chân chữ không phải liên kết. Người đọc sẽ thử bấm vào. Hãy dùng chữ đậm, màu hoặc nền để nhấn mạnh.
• Bỏ gạch chân liên kết trong nội dung mà không có dấu hiệu khác thay thế. Chỉ riêng màu là chưa đủ với người không phân biệt được màu.
• Cố bỏ gạch chân của phần tử cha từ phần tử con. Không thể gỡ nó từ bên trong; hãy sửa phần tử cha hoặc cho phần tử con inline-block.
• Tưởng text-underline-offset nằm trong cách viết gọn. Nó là một thuộc tính riêng.
• Đưa độ dày vào cách viết gọn. text-decoration: underline 2px chạy được trên Chrome và Firefox, nhưng Safari bỏ qua cả khai báo. Hãy dùng text-decoration-thickness.