글자 위로 밑줄 긋기 - text-decoration

text-decoration

text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다.

기본형

text-decoration : none | line-through | overline | underline

none : 선을 만들지 않습니다.

line-through : 글자 중간에 선을 만듭니다.

overline : 글자 위에 선을 만듭니다.

underline : 글자 아래에 선을 만듭니다.

속성값을 여러개 사용하여 여러 선을 만들 수 있습니다.

예를 들어 다음은 글자 위와 아래에 선을 만듭니다.

text-decoration: overline underline;

예제 1

<p class="a"><code>text-decoration: none;</code></p>
<p class="b"><code>text-decoration: line-through;</code></p>
<p class="c"><code>text-decoration: overline;</code></p>
<p class="d"><code>text-decoration: underline;</code></p>
<p class="e"><code>text-decoration: overline underline;</code></p>
<p class="f"><code>text-decoration: overline underline line-through;</code></p>

.a {
  text-decoration: none;
}
.b {
  text-decoration: line-through;
}
.c {
  text-decoration: overline;
}
.d {
  text-decoration: underline;
}
.e {
  text-decoration: overline underline;
}
.f {
  text-decoration: overline underline line-through;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="550"
data-pen-title="CSS 선으로 텍스트를 꾸미기 text-decoration 예제1"
data-slug-hash="JjKKPxL"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 550px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 2

none 속성으로 텍스트 링크의 밑줄을 없앨 수 있습니다.

<p><a href="javascript:;">HTML5 표준 규약 살펴보기</a></p>

<p><a class="no" href="javascript:;">CSS3 표준  살펴보기</a></p>

.no {
  text-decoration: none
}

class="codepen"
data-editable="true"
data-preview="true"
data-height="265"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="QWGmGQM"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 선으로 텍스트를 꾸미기 text-decoration 예제2"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.