CSS 밑줄을 글자보다 짧게 만드는 법, 이제 inset으로

기본 밑줄에 양수 inset을 더하면 양끝이 줄어든다

글자는 그대로 두고 밑줄만 짧게 만들려면 text-decoration-inset에 양수 길이를 넣는다. Chrome 154에 추가된 이 속성은 텍스트 장식의 시작점과 끝점을 직접 조절한다. 단순한 길이 조절을 위해 배경 그라데이션이나 별도 요소로 선을 그릴 필요가 줄어든다.

다음은 기본 밑줄을 먼저 설정하고, inset을 지원하는 브라우저에서만 양끝을 0.2em씩 줄이는 예다. @supports 밖의 밑줄은 미지원 브라우저에도 남는다.

.article-link {
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}

@supports (text-decoration-inset: 0.2em) {
  .article-link {
    text-decoration-inset: 0.2em;
  }
}

위 코드는 링크의 글자 크기나 클릭 영역을 줄이는 설정이 아니다. 조절 대상은 장식선의 양끝이다. 사용 중인 디자인에 맞춰 길이 값을 바꾸되, 짧은 단어에서는 선이 지나치게 줄어들지 않는지도 봐야 한다.

한 값은 양끝에, 두 값은 시작과 끝에 적용한다

inset 값의 부호가 방향을 정한다. 양수는 안으로 들어와 선을 짧게 만들고, 음수는 바깥으로 나가 선을 길게 만든다. 아래 값은 동작을 구분하기 위한 예다.

두 값은 시작과 끝 순서다. 모든 쓰기 방향에서 왼쪽과 오른쪽이라고 고정해서 외우는 것보다 문서의 진행 방향에 맞춰 이해하는 편이 정확하다.

auto는 길이를 원래대로 돌리는 값이 아니다. 인접한 텍스트 장식이 하나의 선처럼 붙어 보이지 않도록 브라우저가 간격을 정한다. 조절을 없애려면 auto가 아니라 초기값인 0을 쓴다.

밑줄을 아래로 내리고 싶다면 inset이 아니라 offset이다

길이와 간격을 혼동하면 값을 바꿔도 원하는 결과가 나오지 않는다. text-underline-offset은 밑줄을 원래 위치에서 얼마나 떨어뜨릴지 정하고, text-decoration-thickness는 선의 두께를 정한다.

따라서 “글자보다 짧게”는 inset, “선을 더 굵게”는 thickness, “글자와 선 사이를 더 띄우기”는 underline-offset의 문제다. 첫 예제처럼 함께 사용할 수 있지만 하나의 값으로 세 효과를 바꾸는 것은 아니다.

inset은 text-decoration 단축 속성에 포함되지 않으므로 별도 선언으로 적는다. 또한 명세의 적용 대상은 그 요소가 그리는 장식선이다. 부모가 그은 밑줄을 자식의 inset만으로 줄이려 하지 말고, 실제로 선을 설정한 요소에 적용해야 한다.

기본 밑줄을 남기고, 여러 줄 링크를 따로 점검한다

CSS의 @supports는 브라우저가 해당 선언을 지원하는지에 따라 스타일을 적용한다. 최신 Chrome에서 길이가 조절된다는 이유로 모든 브라우저에서 같다고 가정할 필요는 없다. 첫 예제처럼 기본 모양과 추가 효과를 나누면 긴 밑줄도 유효한 대체 표현이 된다.

여러 줄에서는 선의 양끝이 무엇인지도 달라진다. 명세상 기본 box-decoration-break: slice는 첫 조각의 시작과 마지막 조각의 끝에 조절을 적용한다. clone은 각 조각에 독립적으로 적용한다. 긴 인라인 링크가 줄마다 똑같이 잘린다고 가정하지 말아야 하는 이유다.

적용할 때는 한 줄 링크와 모바일에서 두 줄이 되는 링크를 함께 확인한다. 길이만 다듬는 목적이면 기본 underline 위에 inset을 얹는 방식부터 시작할 수 있다. 미지원 환경에서도 반드시 같은 짧은 선이 필요할 때는 기존 장식 구현을 유지할지 별도로 결정한다.