짧은 밑줄 만들기
밑줄은 보통 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;
}