밑줄 여유있게 치기

https://bskyvision.com/955

[css] 밑줄 여유있게 치기

 

 

css 속성 text-decoration:underline으로 밑줄을 치면, 너무 텍스트와 가깝게 밑줄이 쳐집니다.

 

 

<p style="text-decoration: underline;">밑줄이 너무 붙어있죠.</p>

 

밑줄을 아래로 좀 더 띄우고 싶다면, css에 text-underline-position:under를 추가해주시면 됩니다. 

<p style="text-decoration: underline;">밑줄이 너무 붙어있죠.</p>
<p style="text-decoration: underline; text-underline-position:under;">밑줄이 아래로 조금 내려왔죠?</p>

 

저는 개인적으로 좀 여유있게 밑줄이 쳐지는 게 보기 좋은 것 같습니다. 

 

 

다만 이 속성은 firefox와 opera. safari에서는 적용이 안된다.