짧은 밑줄 만드는 방법

짧은 밑줄 만들기

밑줄은 보통 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;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

이걸 찾고 있을 수도?

• 글자 위로 밑줄 긋기 - text-decoration
• 테두리 모양을 정하는 방법 - border-style