การตั้งค่าสีของ Text Decoration ใน CSS

คุณสมบัติ text-decoration-color ใช้กำหนดสีของเส้นประดับข้อความ (underline, overline, line-through) แยกต่างหากจากสีข้อความ (color)

ตัวอย่างที่ 1: Overline สีเหลือง

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      text-decoration: overline;
      text-decoration-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Examination Details</h1>
  <p class="demo">Exam on 20th December.</p>
  <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

ตัวอย่างที่ 2: Underline สีส้ม

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      text-decoration: underline;
      text-decoration-color: orange;
    }
  </style>
</head>
<body>
  <h1>Details</h1>
  <p class="demo">Examination Center near ABC College.</p>
  <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

คุณสมบัติ text-decoration ที่เกี่ยวข้อง:

• text-decoration-line: none | underline | overline | line-through | blink
• text-decoration-style: solid | double | dotted | dashed | wavy
• text-decoration-color: สีของเส้น
• text-decoration-thickness: ความหนา (CSS Text Decoration Module Level 4)
• Shorthand: text-decoration

ข้อดี: แยกสีข้อความและสีเส้นประดับได้ ทำให้ออกแบบยืดหยุ่นขึ้น (เช่น ข้อความสีดำ underline สีแดง)

รองรับ: บราวเซอร์สมัยใหม่ทุกตัว (IE ไม่รองรับ text-decoration-color ต้องใช้ prefix หรือ fallback)