text-decoration-style 속성

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

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

구문

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

값

기본값: solid.

예제 . wavy 값

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

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

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

Результат:

예제 . dotted 값

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

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

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

Результат:

예제 . double 값

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

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

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

Результат: