Thay đổi màu gạch chân link với text-decoration-color CSS

Thuộc tính text-decoration-color cho phép đặt màu cho gạch chân, gạch ngang, gạch chéo riêng biệt với màu chữ.

Cú pháp

selector { text-decoration-color: color; }

Ví dụ 1: Đoạn văn

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      background-color: gray;
      margin: 4%;
      font-size: 1.2em;
      text-decoration: underline;
      text-decoration-color: violet;
      text-decoration-thickness: 3px;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <p>Yasereje-jadeje De jebe tu de jebere seibiunouva majavi an de bugui an de guididipi</p>
</body>
</html>

Ví dụ 2: Link và div

<!DOCTYPE html>
<html>
<head>
  <style>
    div, a {
      margin: 4%;
      font-size: 1.2em;
      text-decoration: underline;
      text-decoration-color: green;
      text-decoration-thickness: 2px;
    }
  </style>
</head>
<body>
  <div>
    Văn bản gạch chân xanh lá.
    <a href="#">Hyperlink ở đây!</a>
  </div>
</body>
</html>

Kết quả

• Văn bản/chữ có màu mặc định (đen), nhưng gạch chân màu violet/xanh lá
• Có thể thêm text-decoration-thickness (độ dày) và text-underline-offset (khoảng cách)

Hỗ trợ trình duyệt

Hỗ trợ tốt trên Chrome 57+, Firefox 36+, Safari 12.1+, Edge 79+. Cần prefix -webkit- cho Safari cũ.