การตั้งค่ารูปแบบ Text Decoration ใน CSS

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

ค่าที่ใช้ได้

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

ตัวอย่างที่ 1: Line-through สีน้ำเงิน + Underline สีแดงแบบ double

<!DOCTYPE html>
<html>
<head>
  <style>
    span { 
      text-decoration: line-through; 
      text-decoration-color: blue; 
    }
    .demo2 { 
      text-decoration: underline; 
      text-decoration-style: double; 
      text-decoration-color: red; 
    }
  </style>
</head>
<body>
  <h1>Details</h1>
  <p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
  <p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

ตัวอย่างที่ 2: Overline สีน้ำเงินแบบ wavy + Overline สีแดงแบบ dashed

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { 
      text-decoration: overline; 
      text-decoration-color: blue; 
      text-decoration-style: wavy; 
    }
    .demo2 { 
      text-decoration: overline; 
      text-decoration-style: dashed; 
      text-decoration-color: red; 
    }
  </style>
</head>
<body>
  <h1>Details</h1>
  <p class="demo">Examination Center near ABC College.</p>
  <p class="demo2">Exam begins at 11AM.</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: ความหนา (ใหม่)
• text-decoration-skip-ink: auto/none (ใหม่)
• Shorthand: text-decoration

การประยุกต์: wavy ใช้สำหรับ spelling error (red wavy underline), dashed สำหรับ grammar error, double สำหรับ emphasis