[CSS] text-decoration: underline 간격 조금 띄우기

<div class="underline1">조금 더 아래에 밑줄이 생깁니다</div>
<div class="underline2">원래 밑줄입니다</div>

.underline1 {
  text-decoration: underline;
  text-underline-position: under;
}
.underline2 {
  text-decoration: underline;
}

보통의 경우 디자인적으로 밑줄 간격을 띄우기 위해서

text-decoration: underline보다는 border-bottom을 쓰거나 

아니면 가상클래스 :after를 걸어서 작업하는데

이번 프로젝트에서는 글자가 2줄로 떨어지는 경우가 있어 

맨 밑에 있는 줄에만 밑줄이 생기는 문제가 생겼다.

그래서 text-decoration: underline;으로 작업하고

text-underline-position: under; 속성을 주어 최대한 밑으로 떨어뜨렸다.

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

Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support	Full support33	Full support12	No supportNo	Full support6	No supportNo	No supportNo	No supportNo	No supportNo	Full supportYes	No supportNo	No supportNo	No supportNo	No supportNo
under	Full support33	?	No supportNo	No supportNo	No supportNo	No supportNo	?	?	?	?	?	?	?
left and right	No supportNo Notes	?	No supportNo	No supportNo	No supportNo	No supportNo	?	?	?	?	?	?	No supportNo
above and below ExperimentalNon-standard	No supportNo	?	No supportNo	Full support5	No supportNo	No supportNo	?	?	?	?	?	?	No supportNo
auto-pos ExperimentalNon-standard	No supportNo	?	No supportNo	Full support6	No supportNo	No supportNo	?	?	?	?	?	?	No supportNo