คุณสมบัติ text-decoration-line

คุณสมบัติ text-decoration-line กำหนด ตำแหน่งของเส้นข้อความ ควรใช้คุณสมบัตินี้ร่วมกับ คุณสมบัติ text-decoration-style และ text-decoration-color คุณสมบัติเหล่านี้ขยายการทำงานของคุณสมบัติ text-decoration, เป็นตัวเลือกที่ก้าวหน้ากว่า

ไวยากรณ์

selector {
	text-decoration-line: underline | line-through | overline | none;
}

ค่า

ค่า	คำอธิบาย
`underline`	ทำให้ข้อความมี เส้นใต้
`line-through`	ทำให้ข้อความมี เส้นขีดทับ
`overline`	ทำให้มีเส้น เหนือข้อความ
`none`	ยกเลิกการขีดเส้นใต้ขององค์ประกอบที่มีเส้นใต้อยู่แล้ว ส่วนใหญ่ใช้กับลิงก์ เนื่องจากลิงก์มีเส้นใต้โดยค่าเริ่มต้น

ค่าเริ่มต้น: none สำหรับลิงก์ ค่าเริ่มต้นคือ: underline

ตัวอย่าง

ลองขีดทับข้อความด้วยเส้นสีแดง:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: line-through;
}