CSS / 짧은 밑줄 만들기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

제목보다 짧은 밑줄을 만들려면 ::after 가상 요소를 작은 블록으로 만들고 너비와 높이를 지정하면 됩니다. 제목 글자는 그대로 두고 장식선을 별도로 그리므로, 선의 길이·색·간격과 정렬을 각각 조절할 수 있습니다.

전체 예제: 왼쪽과 가운데에 짧은 선 넣기

다음 코드를 short-underline.html로 저장하고 브라우저에서 엽니다. 외부 이미지나 JavaScript는 필요하지 않습니다. 두 제목 아래에 48px 길이의 선이 나타나며, 두 번째 제목과 선은 가운데에 정렬됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>제목 아래 짧은 장식선</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
main { max-width: 600px; }
    .section-title { margin: 32px 0 16px; color: #146c87; font-size: 24px; }
    .section-title::after {
      content: "";
      display: block;
      width: 48px;
      height: 3px;
      margin-top: 12px;
      background-color: currentColor;
    }
    .center { text-align: center; }
    .center::after { margin-inline: auto; }
    .underlined { text-decoration: underline; text-underline-offset: 4px; }
  </style>
</head>
<body>
<main>
  <h1>짧은 밑줄과 정렬</h1>
  <h2 class="section-title">왼쪽에 맞춘 제목</h2>
  <p>장식선은 제목 전체보다 짧고, 왼쪽에서 시작합니다.</p>
  <h2 class="section-title center">여러 줄이 되어도 아래에 놓이는 가운데 제목</h2>
  <p>짧은 선을 가운데 두려면 블록의 양쪽 여백도 자동으로 지정합니다.</p>
  <p><span class="underlined">글자 자체를 따라가는 일반 밑줄</span></p>
</main>
</body>
</html>

content: ""는 글자 없는 가상 요소를 생성합니다. content를 빼거나 none으로 설정하면 장식선이 생성되지 않습니다. display: block으로 제목 다음 줄에 배치한 뒤 width와 height로 크기를 정했습니다. background-color의 currentColor는 제목에 지정한 글자 색을 사용하므로 제목과 선의 색이 함께 바뀝니다.

길이·간격·정렬을 바꾸는 방법

width의 48px을 96px로 바꾸면 선만 두 배로 길어집니다. height를 바꾸면 두께가, margin-top을 바꾸면 제목과 선 사이의 간격이 바뀝니다. 한 번에 하나의 값을 바꾸고 새로고침해 차이를 본 뒤 원래 값으로 되돌리면 각 속성의 역할을 구분하기 쉽습니다. 고정 길이 대신 3rem처럼 글자 크기 기준 길이를 사용할 수도 있습니다.

text-align: center는 제목 안의 텍스트를 가운데 정렬하지만, 너비가 정해진 블록 장식선까지 가운데 옮기지는 않습니다. 그래서 center::after에 margin-inline: auto를 추가했습니다. 가로 쓰기에서 양쪽 여백이 남은 공간을 나누어 선을 가운데 둡니다. 오른쪽 정렬은 제목을 text-align: right로 설정하고 선의 margin-left를 auto, margin-right를 0으로 지정하는 방식으로 만들 수 있습니다.

창을 줄여 두 번째 제목을 여러 줄로 만들어 보세요. 가상 요소는 제목의 마지막 글자 뒤에 생기는 블록이므로 제목 전체의 아래에 선 하나가 놓입니다. 줄마다 각각 밑줄을 긋는 방식과 결과가 다릅니다. 제목을 감싼 별도 요소에 고정 높이가 있다면 줄이 늘 때 선이 잘릴 수 있으므로 높이를 강제로 제한하지 않는 편이 좋습니다.

text-decoration·border와 구분해서 선택하기

실제 글자의 아래를 따라가는 밑줄은 예제 마지막 줄처럼 text-decoration: underline이 적합합니다. 여러 줄 텍스트에도 각 줄을 따라 밑줄이 생깁니다. 반면 border-bottom은 요소 상자의 아래 경계에 그려지므로 block 제목에 사용하면 제목 글자보다 훨씬 길게 보일 수 있습니다.

짧은 선이 단순 장식이라면 content에 빈 문자열을 유지하세요. 중요한 제목이나 설명을 가상 요소의 content에만 넣으면 읽기·복사·보조 기술 사용에서 정보 전달이 불안정해질 수 있습니다. 링크를 표시하는 밑줄을 전부 짧은 장식선으로 바꾸기보다, 링크의 식별과 제목 장식을 서로 다른 목적으로 다루는 것이 좋습니다.

가상 요소의 생성 조건은 MDN의 ::after 설명, 글자에 적용하는 밑줄은 text-decoration-line 설명에서 확인할 수 있습니다.

CSS