See the Pen text-decoration by nilgi (@nilgi) on CodePen.
<style type="text/css">
.nn {
text-decoration-line: none; // 선 없음
}
.ol {
text-decoration-line: overline; // 글자 위에
}
.lt {
text-decoration-line: line-through; // 글자 중간
}
.ul {
text-decoration-line: underline; // 글자 아래
}
.olul {
text-decoration-line: overline underline; // 글자 위, 아래
}
.olltul {
text-decoration-line: overline line-through underline; // 글자 위, 중간, 아래
}
</style>
<h1>text-decoration-line</h1>
<h2 class="nn">none</h2>
<h2 class="ol">overline</h2>
<h2 class="lt">line-through</h2>
<h2 class="ul">underline</h2>
<h2 class="olul">overline underline</h2>
<h2 class="olltul">overline line-through underline</h2>
<style type="text/css">
.tdc {
text-decoration: underline;
}
.tdc1 {
text-decoration-color: red;
}
.tdc2 {
text-decoration-color: rgb(30, 144, 255);
}
</style>
<h1>text-decoration-color</h1>
<h2 class="tdc1 tdc">text-decoration-color red</h2>
<h2 class="tdc2 tdc">text-decoration-color rgb(30, 144, 255)</h2>
<style type="text/css">
.tds {
text-decoration: underline;
}
.tdss {
text-decoration-style: solid; // 실선
}
.tdsd {
text-decoration-style: double; // 두줄
}
.tdsdt {
text-decoration-style: dotted; // 점선
}
.tdsda {
text-decoration-style: dashed; // 파선
}
.tdsw {
text-decoration-style: wavy; // 물결
}
</style>
<h1>text-decoration-style</h1>
<h2 class="tdss tds">text-decoration-style solid</h2>
<h2 class="tdsd tds">text-decoration-style double</h2>
<h2 class="tdsdt tds">text-decoration-style dotted</h2>
<h2 class="tdsda tds">text-decoration-style dashed</h2>
<h2 class="tdsw tds">text-decoration-style wavy</h2>
<style type="text/css">
.tdt {
text-decoration: underline;
}
.tdta {
text-decoration-thickness: auto; // 굵기 자동
}
.tdtpx {
text-decoration-thickness: 7px; // px지정
}
.tdtp {
text-decoration-thickness: 50%; // % 지정
}
</style>
<h1>text-decoration-thickness</h1>
<h2 class="tdta tdt">text-decoration-thickness auto</h2>
<h2 class="tdtpx tdt">text-decoration-thickness 7px</h2>
<h2 class="tdtp tdt">text-decoration-thickness 50%</h2>
<style type="text/css">
.hw {
text-decoration: underline wavy tomato 3px; // 속기로 쓰기 - 위치, 모양, 색, 굵기
}
</style>
<h2 class="hw">text-decoration 속기 / 위치, 모양, 색, 굵기</h2>