อัปเดต CSS: คุณสมบัติใหม่สำหรับการจัดรูปแบบข้อความและเส้นใต้

ด้วยการนำคุณสมบัติ text-decoration ใหม่ๆ มาใช้งาน เราสามารถจัดรูปแบบข้อความได้หลากหลายมากกว่าเดิม คุณสมบัติ text-decoration เป็น shorthand สำหรับ text-decoration-thickness, text-decoration-color, text-decoration-line และ text-decoration-style ส่วน text-decoration-skip, text-decoration-skip-ink, text-underline-offset และ text-underline-position ต้องระบุแยกต่างหาก

ไวยากรณ์ (Syntax)

รูปแบบการใช้งาน CSS text-decoration:

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

ตัวอย่างที่ 1: รูปแบบเส้นต่างๆ

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      #one { 
        text-decoration-style: double; 
        text-decoration-skip-ink: auto; 
      } 
      p { 
        padding: 2%; 
        text-decoration-line: underline overline; 
        text-decoration-style: wavy; 
      } 
      p:nth-of-type(even) { 
        text-decoration: overline; 
      } 
      span { 
        text-decoration: line-through; 
      } 
    </style> 
  </head> 
  <body> 
    <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p> 
    <p>Random Demo Text</p> 
    <p>Random <span>Demo</span> Text</p> 
  </body> 
</html>

ผลลัพธ์ที่ได้:

ตัวอย่างที่ 2: การปรับแต่งรายละเอียด

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      p { 
        margin: 3%; 
        font-size: x-large; 
        text-decoration-line: underline overline; 
        text-decoration-style: dotted; 
        text-decoration-skip-ink: none; 
        text-decoration-thickness: 4px; 
      } 
    </style> 
  </head> 
  <body> 
    <p>Super Demo abcdefghijklmnopqrstuvwxyz</p> 
  </body> 
</html>

ผลลัพธ์ที่ได้: