สำหรับการตกแต่งข้อความใน CSS ให้ใช้คุณสมบัติ text-decoration เป็น shorthand สำหรับคุณสมบัติต่อไปนี้:
text-decoration-line text-decoration-color text-decoration-style
ตัวอย่างที่ 1: ใช้ shorthand overline underline
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; } </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>
ผลลัพธ์
ตัวอย่างที่ 2: ใช้ค่าต่างๆ แยกกัน (longhands)
<!DOCTYPE html> <html> <head> <style> p { writing-mode: vertical-rl; text-decoration-line: overline; text-decoration-color: red; text-decoration-style: wavy; } </style> </head> <body> <h1>Demo Heading</h1> <p>This is demo text.</p> </body> </html>
ผลลัพธ์
ค่าของแต่ละคุณสมบัติย่อย
| คุณสมบัติ | ค่าที่ใช้ได้ |
|---|---|
| text-decoration-line | none, underline, overline, line-through, blink |
| text-decoration-color | สีใดๆ (color value) |
| text-decoration-style | solid, double, dotted, dashed, wavy |
| text-decoration-thickness | ความหนา (auto, from-font, length, percentage) |
| text-underline-offset | ระยะห่างเส้นใต้ (length, percentage) |
Shorthand ทั้งหมด
text-decoration: line style color thickness offset; /* ตัวอย่าง */ text-decoration: underline wavy red 2px 4px;
กรณีใช้งานยอดนิยม
text-decoration: none- ลบเส้นใต้ลิงก์text-decoration: line-through- ขีดทับราคาเก่าtext-decoration: underline wavy red- เน้นข้อผิดพลาด spellingtext-underline-offset: 4px- เว้นระยะเส้นใต้จากตัวอักษร (อ่านง่ายขึ้น)
