링크 밑줄이 글자에 붙어 답답할 때, text-underline-offset으로 다듬는 법
본문 링크 밑줄이 글자 바닥에 딱 붙어 답답해 보인다면, 밑줄을 지우기보다 text-underline-offset과 text-decoration-thickness로 간격과 두께만 조정하는 편이 낫습니다.
CSS 몇 줄이면 되고, 링크인지 알아보기 쉬운 장점은 그대로 남습니다.
💡 밑줄을 그냥 없애면 안 되나요?
리뉴얼 상담을 하다 보면 "밑줄이 촌스러워서 지워 달라"는 요청을 자주 받습니다. 그런데 본문 속 링크에서 밑줄을 빼고 색만 다르게 두면, 색 구분이 어려운 분이나 햇빛 아래에서 휴대폰을 보는 분은 어디가 링크인지 알기 어렵습니다. 웹 접근성 기준(WCAG)도 색만으로 정보를 구분하지 말라고 권합니다. 그래서 밑줄은 두고 모양을 다듬는 쪽을 추천합니다.
1. 간격과 두께를 em 단위로 조정하기
text-underline-offset은 밑줄을 글자에서 얼마나 띄울지, text-decoration-thickness는 밑줄 두께를 정합니다. px 대신 em으로 주면 제목처럼 글자가 커지는 곳에서도 비율이 자연스럽게 따라갑니다.
/* 본문 링크 밑줄 다듬기 */
.post a {
color: #cc2b2b;
text-decoration-line: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.25em;
text-decoration-color: rgba(204, 43, 43, 0.4);
}
.post a:hover {
text-decoration-color: currentColor;
}
밑줄 색을 글자보다 옅게 두고 마우스를 올렸을 때만 진하게 바꾸면, 평소에는 차분하고 누를 때는 반응이 분명해집니다. 사파리 일부 버전에서는 text-decoration 단축 속성 안에 넣은 두께가 무시되는 경우가 있어서, 위처럼 속성을 하나씩 나눠 적는 편이 안전합니다.
2. 두 줄로 넘어가는 링크에 밑줄 애니메이션 넣기
메뉴나 카드 제목에 밑줄이 왼쪽부터 그어지는 효과를 넣을 때 ::after로 선을 만들면, 링크가 두 줄로 넘어가는 순간 마지막 줄에만 선이 생깁니다. 배경 그라디언트로 그리면 줄마다 따라가서 이 문제가 없습니다.
/* 줄바꿈돼도 줄마다 밑줄이 그어짐 */
.card-title a {
text-decoration: none;
background: linear-gradient(currentColor, currentColor)
0 100% / 0 1px no-repeat;
transition: background-size 0.3s;
}
.card-title a:hover,
.card-title a:focus-visible {
background-size: 100% 1px;
}
:focus-visible을 같이 적어 두면 키보드로 이동하는 방문자에게도 같은 효과가 보입니다.
3. 어디에 어떤 방식을 쓸지
| 위치 | 추천 방식 |
|---|---|
| 본문 속 링크 | 밑줄 유지, 간격·두께·색만 조정 |
| 상단 메뉴 | 평소 밑줄 없음, hover·현재 페이지 표시 |
| 카드·목록 제목 | 배경 그라디언트 밑줄 애니메이션 |
| 버튼형 링크 | 밑줄 없이 버튼 모양으로 구분 |
적용한 뒤에는 실제 휴대폰에서 한글 본문 링크를 한 번 확인해 보세요. 폰트마다 기본 밑줄 위치가 달라서, 같은 값이라도 나눔고딕과 Pretendard에서 간격이 조금씩 다르게 보입니다.
"밑줄 하나도 읽기 편해야 누르게 됩니다."
나눔웹은 리뉴얼할 때 링크·버튼·메뉴의 상태 표시를 따로 정리해
방문자가 어디를 눌러야 할지 헷갈리지 않도록 맞춥니다.