CSS text-decoration-line: 글 장식선 종류 (밑줄, 윗줄, 취소선)

CSS text-decoration-line 속성은 밑줄과 윗줄 등 글을 장식하는 선의 종류를 설정합니다.

u {
  text-decoration-line: underline;
  /* text-decoration-line: overline; */
  /* text-decoration-line: line-through; */
  /* text-decoration-line: underline overline; */
  /* text-decoration-line: underline overline line-through; */
}

.text {
  font-size: 1.25rem;
}

<p class="text">
  마침내 우리는 성스러운 <u>완모식 표본</u> 앞에 당도했다.
</p>

불러오는 중...

구문

/* 단일 키워드 */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

/* 다중 키워드 */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;

/* 전역 값 */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

text-decoration-line 속성에는 none 키워드, 또는 공백으로 구분한 한 개 이상의 장식선 종류 키워드를 사용합니다.

값

none: 글에 장식선을 추가하지 않습니다.
underline: 글의 각 행 아래에 밑줄을 추가합니다.
overline: 글의 각 행 위에 윗줄을 추가합니다.
line-through: 글의 각 행 가운데를 가로지르는 선을 추가합니다.

예제

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

<p class="wavy">
  불길한 빨간색 물결 밑줄이에요.
</p>

불러오는 중...

명세

CSS Text Decoration Module Level 3

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`text-decoration-line`
`blink`
`grammar-error`
`line-through`
`none`
`overline`
`spelling-error`
`underline`

같이 보기

장식선 단축 속성: text-decoration
장식선 색: text-decoration-color
장식선 모양: text-decoration-style