Frontend
[CSS] text-decoration: underline 간격 조금 띄우기
제이JY
2019. 2. 15. 16:23
<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에서는 적용이 안된다.
| 33 | 12 | No | 6 | No | No | No | No | Yes | No | No | No | No |
| 33 | ? | No | No | No | No | ? | ? | ? | ? | ? | ? | ? |
| No | ? | No | No | No | No | ? | ? | ? | ? | ? | ? | No |
| No | ? | No | 5 | No | No | ? | ? | ? | ? | ? | ? | No |
| No | ? | No | 6 | No | No | ? | ? | ? | ? | ? | ? | No |
반응형