CSS text-decoration: 글 장식선 (밑줄, 윗줄, 취소선)

ALATTA

CSS text-decoration: 글 장식선 (밑줄, 윗줄, 취소선)

CSS text-decoration 속성은 밑줄과 윗줄 등 글을 장식하는 선의 종류, 모양, 색, 두께를 설정합니다.

.line {
  text-decoration: underline;
  /* text-decoration: overline 3px; */
  /* text-decoration: line-through wavy; */
  /* text-decoration: underline wavy red; */
  /* text-decoration: underline overline dashed hsl(200, 96%, 60%); */
}

.text {
  font-size: 1.25rem;
}

<p class="text">
  마침내 우리는 성스러운 <span class="line">완모식 표본</span> 앞에 당도했다.
</p>

라이브 에디터 (편집 가능)

    • 불러오는 중...

    구성 속성

    text-decoration은 다음 네 속성의 단축 속성입니다.

    구문

    text-decoration: none;
text-decoration: underline;
text-decoration: overline red;
text-decoration: underline line-through blue 2px;

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

    text-decoration 속성에는 각 구성 속성의 값을 공백으로 구분해 사용합니다.

    예제

    밑줄과 윗줄에 다른 스타일 입히기

    CSS만 사용해서는 장식선의 종류마다 다른 스타일을 적용할 수 없습니다. 대신 HTML 요소를 중첩하고, 각각 다른 스타일을 적용하는 걸 고려할 수 있습니다.

    .overline {
  text-decoration-color: blue;
  text-decoration-line: overline;
}
.underline {
  text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.both {
  text-decoration-color: #0e0;
  text-decoration-line: underline overline;
}

    <p>
  이럴 수가, <span class="overline"><span class="underline">파란 윗선과 빨간 밑선</span></span>이
  같이 존재해요!
</p>

<p>
  요소 중첩 없이는 <span class="both">같은 스타일만 사용할 수 있어요.</span>
</p>

    라이브 에디터 (편집 가능)

    • 불러오는 중...

    명세

    브라우저 호환성

    MDN browser-compat-data
    데스크톱모바일
    iOSAndroid
    SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
    text-decoration
    text-decoration-color and text-decoration-style included in shorthand
    text-decoration-thickness included in shorthand

    같이 보기