text-decoration-style 속성

text-decoration-style 속성은 텍스트의 선 종류를 변경합니다: 단일 선, 이중 선, 점선, 파선, 물결선.

이 속성은 text-decoration-line 속성과 text-decoration-color 속성과 함께 사용해야 합니다. 이러한 속성들은 text-decoration 속성의 기능을 확장하며, 보다 고급스러운 대안입니다.

구문

선택자 {
	text-decoration-line: solid | double | dotted | dashed | wavy;
}

기본값: solid.

이제 텍스트가 빨간색 물결선으로 밑줄이 표시됩니다:

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

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

이제 텍스트가 빨간색 점선으로 밑줄이 표시됩니다:

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

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

이제 텍스트가 빨간색 이중선으로 가로줄이 표시됩니다:

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

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