เปลี่ยนสี Underline ของ Link ด้วย CSS text-decoration-color

CSS Property text-decoration-color ใช้กำหนดสีของเส้นตกแต่งข้อความ (Underline, Overline, Line-through) แยกจากสีตัวอักษร (color) ได้ ตัวอย่างนี้แสดงการเปลี่ยนสี Underline ของ Paragraph และ Link

Syntax

selector {
  text-decoration-color: ;
  /* Shorthand: text-decoration: underline red; */
}

ตัวอย่างที่ 1: Paragraph Underline สีม่วง

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      background-color: gray;
      margin: 4%;
      font-size: 1.2em;
      text-decoration: underline;
      text-decoration-color: violet;
    }
  </style>
</head>
<body>
  <p>
    Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
  </p>
</body>
</html>

ตัวอย่างที่ 2: Div และ Link Underline สีเขียว

<!DOCTYPE html>
<html>
<head>
  <style>
    div, a {
      margin: 4%;
      font-size: 1.2em;
      text-decoration: underline;
      text-decoration-color: green;
    }
  </style>
</head>
<body>
  <div>
    Underlined demo text. 
    <a href="#">Hyperlink here!</a>
  </div>
</body>
</html>

Text Decoration Properties ทั้งหมด

Modern Shorthand Usage

/* แบบเดิม */
a {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

/* แบบใหม่ (Shorthand) */
a {
  text-decoration: underline wavy red;
}

/* กำหนด Thickness และ Offset */
a {
  text-decoration: underline 3px wavy red;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}

ตัวอย่าง Progressively Enhanced Links

a {
  color: #1a0dab;
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

a:hover::after,
a:focus::after {
  transform: scaleX(1);
}

/* Native Underline Alternative */
a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s;
}
a:hover {
  text-decoration-color: currentColor;
}

Use Cases

• Brand Links: Underline สี Brand Color ขณะ Text สี Netural
• Error States: Line-through สีแดงสำหรับราคาเดิม
• Code/Technical: Overline สีส้มสำหรับ Keyboard Keys (Ctrl+C)
• Wavy Underline: Spelling/Grammar Error (Red Wavy)
• Skip-ink: Underline ไม่ทับตัวอักษรหาง (g, j, p, q, y) - อ่านง่ายขึ้น

Browser Support

• text-decoration-color: Chrome 57+, Firefox 36+, Safari 12.1+, Edge 79+
• text-decoration-thickness, text-underline-offset, text-decoration-skip-ink: Chrome 87+, Firefox 70+, Safari 12.1+, Edge 87+
• IE: ไม่รองรับ (ใช้ Border-bottom hack)

Fallback สำหรับ Browser เก่า

a {
  /* Fallback */
  border-bottom: 2px solid red;
  text-decoration: none;
  padding-bottom: 2px;
}

/* Modern */
@supports (text-decoration-color: red) {
  a {
    border-bottom: none;
    padding-bottom: 0;
    text-decoration: underline;
    text-decoration-color: red;
    text-underline-offset: 4px;
  }
}