text-decoration

text-decoration CSS 단축 속성은 글씨의 장식(선) 색을 지정합니다. text-decoration-line, text-decoration-color, text-decoration-style의 값을 설정합니다.

글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <p>이 문단에 <em>강조 표시</em>가 있어요.</p> 마크업에 p { text-decoration: underline; } 스타일을 적용하면 전체 문단에 밑줄이 쳐집니다. em { text-decoration: none; }을 추가하더라도 아무 변화도 일어나지 않습니다. 다만 em { text-decoration: overline; } 스타일은 "강조 표시"가 윗줄과 밑줄 모두 갖게 합니다.

구문

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

text-decoration-line
underline, line-through 등 장식의 종류.
text-decoration-color
장식의 색.
text-decoration-style
solid, wavy, dashed 등 장식의 스타일.

형식 구문

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

예제

.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;
}

.blink {
  text-decoration: blink;
}
<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="blink">이 글씨는 브라우저에 따라서 깜빡일 수 있어요.</p>

명세

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration' in that specification.
Candidate Recommendation Transformed into a shorthand property. Added support for the value of text-decoration-style.
CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.
Recommendation No significant changes.
CSS Level 1
The definition of 'text-decoration' in that specification.
Recommendation Initial definition.
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decorationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
blink
Deprecated
Chrome No support NoEdge No support NoFirefox No support 1 — 23IE No support NoOpera No support 4 — 15Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 23Opera Android No support 10.1 — 14Safari iOS No support NoSamsung Internet Android Full support 7.0
ShorthandChrome Full support 57Edge No support NoFirefox Full support 36
Full support 36
Partial support 6
IE No support NoOpera Full support 44Safari Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 36
Full support 36
Partial support 6
Opera Android Full support 43Safari iOS Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기