คุณสมบัติ text-decoration-line ใช้กำหนดประเภทของเส้นประดับข้อความ (ประเภทเส้น) แยกจากสีและรูปแบบ
ค่าที่ใช้ได้
text-decoration-line: none | underline | overline | line-through | blink | initial | inherit;
none: ไม่มีเส้น (default)underline: เส้นใต้overline: เส้นบนline-through: เส้นทับกลาง (strikethrough)blink: กระพริบ (deprecated, ไม่แนะนำใช้)- รวมได้หลายค่า:
underline overline,underline line-through
ตัวอย่างที่ 1: Overline + Underline สีน้ำเงิน
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
}
</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: Line-through สีน้ำเงิน + Underline สีเหลือง
<!DOCTYPE html>
<html>
<head>
<style>
span {
text-decoration: line-through;
text-decoration-color: blue;
}
.demo2 {
text-decoration: underline;
text-decoration-color: yellow;
}
</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>
แนะนำ: ใช้ Shorthand text-decoration
/* line-through สีน้ำเงิน */ text-decoration: line-through blue; /* underline สีแดงแบบ wavy หนา 2px */ text-decoration: underline wavy red 2px;
ข้อดีของ shorthand: เขียนสั้น กำหนด line, style, color, thickness พร้อมกัน รองรับในบราวเซอร์สมัยใหม่
