짧은 밑줄 만들기

밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 요소보다 짧은 밑줄을
만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을
만들고 위치와 길이를 정해주면 됩니다.

예제

<h1> 요소에 짧은 밑줄을 만들고 싶다면 다음과 같이 합니다.
밑줄의 길이는 width 속성으로 정합니다. 요소와 밑줄 사이의 간격을 조정하고
싶으면 padding 속성이나 margin 속성을 추가하면 됩니다.

<h1>Lorem Ipsum Dolor</h1>
<h1 class="alt" style="text-align: center;">Lorem Ipsum Dolor</h1>

h1:after {
  content: "";
  display: block;
  width: 60px;
  border-bottom: 1px solid #bcbcbc;
  margin: 20px 0px;
}
h1.alt:after {
  margin: 20px auto;
}