[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>

 

 

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