text-decoration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

CSS text-decoration 단축 속성은 텍스트에 장식용 선을 추가합니다. 이 속성은 text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness의 단축 속성입니다.

시도해보기

텍스트 장식은 모든 자손 텍스트 요소에 걸쳐서 적용됩니다. 달리 말하면, 자식 요소에서는 부모가 적용한 텍스트 장식을 제거할 수 없습니다. 예를 들어 <p>이 문단에 <em>강조 표시</em>가 있어요.</p> 마크업에 p { text-decoration: underline; } 스타일을 적용하면 전체 문단에 밑줄이 추가됩니다. 그다음 em { text-decoration: none; } 스타일 규칙을 추가해도 밑줄은 계속 보입니다. 다만 em { text-decoration: overline; } 스타일은 "강조 표시" 텍스트가 윗줄과 밑줄을 모두 갖게 합니다.

구성 속성

이 속성은 다음 CSS 속성의 단축 속성입니다.

구문

css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

text-decoration 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값과 동일합니다.

text-decoration-line

underline, line-through 등 장식의 종류를 설정합니다.

text-decoration-color

장식의 색을 설정합니다.

text-decoration-style

solid, wavy, dashed 등 장식에 사용할 선의 스타일을 설정합니다.

text-decoration-thickness

장식에 사용할 선의 두께를 설정합니다.

형식 정의

초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

형식 구문

text-decoration = 
<'text-decoration-line'> ||
<'text-decoration-style'> ||
<'text-decoration-color'>

<text-decoration-line> =
none |
[ underline || overline || line-through || blink ]

<text-decoration-style> =
solid |
double |
dotted |
dashed |
wavy

<text-decoration-color> =
<color>

예제

text-decoration 값 시연

css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
html
<p class="under">밑줄을 가지는 텍스트입니다.</p>
<p class="over">윗줄을 가지는 텍스트입니다.</p>
<p class="line">취소선을 가지는 텍스트입니다.</p>
<p>
  기본 스타일과 달리
  <a class="plain" href="#">이 링크에는 밑줄이 없을 것입니다.</a>
  사용자들은 보통 하이퍼링크 여부를 밑줄로 구분하므로, 앵커에서 밑줄을 제거할
  때는 주의해야 합니다.
</p>
<p class="underover">밑줄과 윗줄 모두 가지는 텍스트입니다.</p>
<p class="thick">
  브라우저가 지원하는 경우 아주 두꺼운 보라색 밑줄을 가지게 될 텍스트입니다.
</p>
<p class="blink">이 텍스트는 브라우저에 따라서 깜빡일 수 있습니다.</p>

명세

Specification
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration
text-decoration-color and text-decoration-style included in shorthand
text-decoration-thickness included in shorthand

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.

같이 보기