사용자 정의 밑줄

Question

텍스트가 두 줄로가는 사용자 정의 밑줄을 만드는 방법을 아는 사람이 있습니까? 현재

나는 다음과 같은 한 : 줄이 길어지고 랩 때

<h1 class="title" id="page-title">Title goes here</h1> 

h1 { 
display: inline-block; 
zoom: 1; 
line-height: 1.4em; 
background-image: url(../img/underline.png); 
background-repeat: repeat-x; 
background-position: left bottom; 
} 

문제는, 당신은 하나의 밑줄을 얻는다.

는 x 방향으로 반복하고 요소의 하단에 배치 된 배경 이미지를 사용하여 다시 IE8

Answer 1

코드에 사용 된 트릭에 작동하는 솔루션을 찾고

JSFiddle를 참조하십시오. 따라서 요소의 블록과 같은 렌더링 (인라인 블록 포함)의 경우 "밑줄"이 블록의 맨 아래에만 나타납니다.

h1 { display: inline; } 

그런 다음 줄 바꿈 및 수직 간격을 사용하여 작성해야합니다 :

은 어떤 의미에서, 다중 회선 콘텐츠를, 당신이 요소를 인라인 요소를 확인해야합니다, 트릭 작업을 만들려면 div 컨테이너에 h1 요소를 래핑하고 수직 여백을 설정하는 등의 방법이 있습니다.