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.

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

브라우저 호환성

BCD tables only load in the browser

같이 보기