text-decoration-line 속성

text-decoration-line 속성은 텍스트 장식선의 위치를 설정합니다. 이 속성은 text-decoration-style 속성과 text-decoration-color 속성과 함께 사용해야 합니다. 이러한 속성들은 text-decoration 속성의 기능을 확장하며, 더 발전된 대안입니다.

문법

css선택자 {
  text-decoration-line: underline | line-through | overline | none;
}

값

값	설명
`underline`	밑줄이 그어진 텍스트를 만듭니다.
`line-through`	취소선이 그어진 텍스트를 만듭니다.
`overline`	텍스트 위에 선을 만듭니다.
`none`	요소의 밑줄 장식을 제거합니다. 기본적으로 밑줄이 그어져 있는 링크에 가장 많이 사용됩니다.

기본값: none. 링크의 기본값: underline.

예제

텍스트에 빨간색 취소선을 그어보겠습니다:

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

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

Результат: