[HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline)

글에 밑줄을 치는 방법은 기본적으로 text-decoration: underline;이 있다.

하지만 가끔 글씨랑 밑줄간격이 너무 가까워서 간격을 벌리고 싶을 때!

위의 기본 underline 속성에서는 쉽지 않음

아래에 나온 5,6번이 기본 underline속성에서 밑줄 포지션이랑 offset을 수정하여 결과를 만든 케이스인데,

호환성이 매우 떨어져서 사용하지 않는게 좋다.

(최신 버전의 크롬 브라우저로만 사용하는 웹사이트가 아니라면..!)

 

아래 텍스트 중 글자와 밑줄 사이에 여백이 있는 게 몇 개인가요?

밑줄이 보이시나요?

밑줄이 보이시나요?

밑줄이 보이시나요?

 

이와 같이 3개라면 아래 속성들이 호환되는 브라우저를 사용하고 계십니다.

---

텍스트에 밑줄을 주는 방법과 여백을 주는 방법을 알아보자

*사용된 예시들의 위는 한줄짜리, 아래는 두줄짜리 테스트 문구이다.

 

 

1. text-decoration: underline;

CSS 밑줄의 기본!

하지만 놀랍게도 아래의 ::after 속성이 오히려 브라우저 호환성이 더 좋다.

조금 더 많은 브라우저에서 사용할 수 있는건 2번이라는 것.

하지만 유의미한 차이는 아니다.

정석대로 underline으로 밑줄을 주면 심미적으로 마음에 안들 수 있다.

내가 사용한 G마켓산스같은 일부 폰트처럼 영문,숫자에서 밑줄이 깨지거나 간격이 너무 가깝다든지..

 

2. pseudo 속성 ::after로 밑줄을 만들기

text-decoration: underline 외에 가장 많이 쓰이는 방법이 아닐까싶다.

 

 .셀렉터{display:inline;}
  .셀렉터::after {content:"";position: absolute;bottom: 0;left: 0;display:inline;width: 100%;height: 1px;}

주의할 점은 여러줄인 경우 제일 아래 문장에만 밑줄이 생긴다는 점

다른 방법이 있었던것같은데..일단 패스

 

3. border-bottom 속성 이용하기

.클래스 {display: inline;border-bottom: 1px solid #333;}

위 텍스트에 티스토리 코드로 border-bottom을 적용했다. 가운데 정렬이 되지 않는군

말그대로 해당 텍스트의 하단에 보더를 주는 것이다.

 

4. background-image: linear-gradient() 속성 이용하기

display:inline;  background-image: linear-gradient(to bottom, transparent 90%, #333); background-repeat: no-repeat; background-size: 100% 100%;

이 방법은 인라인 텍스트에 그라디언트 배경을 적용해서 밑줄처럼 보이게 한다.

예제는 위부터 아래 90%지점까지는 투명하고 나머지는 #333 색상을 적용하는 코드이다. 밑줄의 두께를 조절하려면 위에 굵게 표시된 숫자의 수를 바꾸면 된다. 

 

5. data- 속성을 이용하여 content에 텍스트를 넣어 텍스트를 이중으로 만든 후 가상요소 content:attr(data-)로 넣은 텍스트에 -webkit-text-fill-color: transparent;를 적용해 투명하게 만든 후 text-decoration:underline; text-decoration-color 속성을 이용하는 방법

설명하는것조차 어려워서 어이없을만큼 정말 우회적인 방법이다.

한마디로 같은 텍스트를 한번 더 복사해서 만든 후 글씨색상은 투명하게하고 밑줄에 따로 색상을 줘서 밑줄을 구현한다.

이 방법은 ..굳이? 브라우저 호환성도 위 방법들보다 떨어짐

하지만 이런 방법도 있다는 걸 알립니다..^^..

위 이미지에서 볼 수 있듯이 텍스트 자체에 밑줄을 주고 위치를 조정하여 여백을 주었기때문에 1번 방법의 밑줄 모양 그대로 위치만 내려왔다는 점에서 다른 방법과 차이가 있다.

 

 

6. text-decoration:underline; text-underline-offset: $px; 

기본 underline에 offset 속성으로 numeric 값(수치)를 입력해 여백을 주는 방법이다.

📢호환성만 높으면 이 방법이 제일 편하겠지만 안타깝게도 호환성이 떨어져 사용을 지양하는게 좋다.

 

바로 위 문장에 티스토리 코드로 해당 offset CSS를 적용했습니다.

밑줄이 없는 일반 텍스트라면 이 속성을 사용할 수 없는 브라우저 환경이겠죠?

7. text-decoration:underline; text-underline-position: under; 

기본 underline에 position 속성을 under로 부여해 여백을 주는 방법이다.

📢역시 호환성만 높으면 이 방법이 편하겠지만 안타깝게도 호환성이 떨어져 사용을 지양하는게 좋다.

 

 

참고로 이 CSS의 디폴트값은 auto이다.

여기서 under로 바꾸면 아래처럼 여백이 생긴다.

 

이런 방법들이 있답니다.

결론적으로는 3번이 가장 무난하겠죠?

 

위 예시들을 정리한 코드 예제 🔻

See the Pen multi-line underline CSS examples by sel (@wimmwell) on CodePen.