[CSS] 텍스트 밑줄 긋기

 

 

 

 

1. 밑줄 긋기

// 기본 밑줄 긋기
.underline {
  text-decoration: underline;
  text-underline-position:under; // 밑줄이 너무 붙어있을 경우 추가
}

// 한번에 모든 속성 주기
.all{
  text-decoration: green dotted underline;
}
.two{
  text-decoration: underline red;
}

 

 

 

2. 속성 포함 밑줄 긋기

// 밑줄 없음
text-text-decoration-line: none;

// 밑줄 긋기
text-text-decoration-line: underline;

// 윗줄 긋기
text-text-decoration-line: overline;

// 취소선
text-text-decoration-line: line-through;

 

 

 

3. 밑줄 색상 지정 (color)

.my-red-underline {
  text-decoration-line: underline;
  text-decoration-color: red;
}

 

 

 

4. 밑줄 모양 (style) 지정

// 한줄
.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

// 두줄
.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}

// 점선
.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

// 라인이 있는 점선
.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

// 물결 무늬
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

 

 

5. 밑줄 굵기 지정

text-decoration-thickness: auto;

text-decoration-thickness: 5px;

text-decoration-thickness: 1em;