text-decoration

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

글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <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-thickness
요소를 꾸미는데 사용되는 선의 두께를 설정합니다.

형식 구문

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

예제

.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;
}
<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 Status Comment
CSS Text Decoration Module Level 4 Working Draft Adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
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
text-decoration-thickness included in shorthand
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 70IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser 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.

같이 보기