คุณสมบัติ text-decoration ใน CSS (การตกแต่งข้อความ)

คุณสมบัติ text-decoration ใน CSS ใช้ตกแต่งข้อความขององค์ประกอบที่เลือก สามารถเพิ่ม line-through, overline, underline เป็นต้น เป็น shorthand ของ text-decoration-line, text-decoration-color, text-decoration-style

ไวยากรณ์ (Syntax)

Selector {
  text-decoration: /*value*/;
}

ตัวอย่างที่ 1: Overline บน ::before pseudo-element

<!DOCTYPE html>
<html>
<head>
  <style>
    p:nth-child(2)::before {
      content: " We will reach the destination ";
      background-color: lightgreen;
      text-decoration: overline blue;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <p>I'm not the only traveller</p>
  <p> before night. </p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Line-through และ Underline

<!DOCTYPE html>
<html>
<head>
  <style>
    span {
      background: rgb(204,22,50);
      text-decoration: blue line-through;
      font-style: italic; color: white;
    }
    p { text-decoration: underline; }
  </style>
</head>
<body>
  <h2>Department Details</h2>
  <p> The employees of Department Marketing, Operations, Finance,
    <span>IT</span> are requested to email their original documents.
    <span> Delay in submission will lead to delayed verification.</span>
  </p>
</body>
</html>

ผลลัพธ์

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

text-decoration:  ||