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

คุณสมบัติ text-decoration-style เปลี่ยน ประเภทของเส้นใต้ข้อความ: เส้นเดี่ยว เส้นคู่ ในรูปแบบจุด ในรูปแบบเส้นประ เส้นหยัก

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

ไวยากรณ์

เซเลกเตอร์ {
	text-decoration-line: solid | double | dotted | dashed | wavy;
}

ค่า

ค่า	คำอธิบาย
`solid`	เส้นทึบ
`double`	เส้นคู่
`dotted`	เส้นในรูปแบบจุด
`dashed`	เส้นในรูปแบบเส้นประ
`wavy`	เส้นหยัก

ค่าเริ่มต้น: solid

ตัวอย่าง ค่า wavy

ข้อความจะถูกขีดเส้นใต้ด้วยเส้นหยักสีแดง

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

#elem {
	text-decoration-style: wavy;
	text-decoration-color: red;
	text-decoration-line: underline;
}

ตัวอย่าง ค่า dotted

ข้อความจะถูกขีดเส้นใต้ด้วยเส้นจุดสีแดง

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

#elem {
	text-decoration-style: dotted;
	text-decoration-color: red;
	text-decoration-line: underline;
}

ตัวอย่าง ค่า double

ข้อความจะถูกขีดฆ่าด้วยเส้นคู่สีแดง

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

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