CSS로 밑줄 두껍게 넣는 가장 간단한 방법

HTML작업할때 자주쓰는 코드들을 저장해놓고 쓰면 편하다.

 

밑줄을 넣는 방법은 여러가지가 있는데 underline이나 :after를 이용해서 넣어봤으나 코드가 복잡해지는 경우가 있어서그냥 스타일태그에 아래 코드를 붙여넣으니 무난하게 원하는 효과를 얻을 수 있었다.

 

1. 사용코드

원하는 태그에다 아래의 스타일 코드를 추가하거나 css에 추가해서 사용하자.

style="box-shadow: inset 0 -11px 0 orange; line-height: 21px

 

2. 적용예시

실제로 어떻게 적용되는지 보자

 

아래 모바일 페이지는 뭔가 허전하다.

첫째, 둘째를 강조하는 의미에서 색상있는 두꺼운 밑줄을 주고 싶다.

 

 

위에 적힌 코드를 스타일 태그에 넣어주면 아래와 같이 된다.

 

 

혹시 밑줄의 두께가 마음에 들지 않는다면

-11px값을 -12px이하로 낮춰주면 더욱 두꺼워진다.

 

아래는 -20px로 낮춰보았다

 

 

각자의 기호에 맞춰 변형해서 사용하면 될것 같다.

색상은 좀 더 연하게 바꿔도 보기 좋았다.