CSS 텍스트 밑줄 이쁘게 넣기

예전부터 텍스트에 밑줄을 넣는 것은 

text-decoration을 넣으면

글자 밑에 딱붙어서 이쁘지 않았다.

 

그냥 코드를 text-decoration:underline을

넣으면 이런식으로 나오는데

디자이너들이 바라는 것은 

글자와 under라인이 좀 떨어진 모양을 바랐다.

 

   h1 {
      position: relative;
      margin-top:50px;
      text-align: center;
      padding-bottom:5px;
      display: inline-block;
    }
    h1:after {
      content:'';
      position: absolute;
      left:0;
      bottom:0;
      width: 100%;
      height: 1px;
      background: #000;
    }

 

이렇게 처리를 해주었는데

이제 ie를 신경 안 써도 되는

크롬의 시대에서는

 h1 {   
      text-decoration: underline;
      text-underline-offset: 0.5rem;
  }

 

이렇게만 넣어주면

 

이런 깔끔한 처리가 발생하여

번거로움이 없어질 거 같다.