CSS : 하우투 블록을 강조하지만, 텍스트를

이있는 부분은 내가 다음과 같은 결과를 얻을 싶지 :CSS : 하우투 블록을 강조하지만, 텍스트를

__ _ __ _ __ _ __ _ ___ 페이지의 _title

그래서 html 마크 업이 <h1>Title of page</h1>이고 h1이 width:100% 및 text-align:right으로 설정되었다고 가정합니다. 제목 왼쪽에 밑줄 만 표시하고 싶습니다.

실마리를 어떻게 달성 할 수 있습니까? 내가 <div>에 제목을 포장하려고했는데, 흰색의 배경을주고 조금 아래로 이동하므로 h1-box의 하단이 겹치지 만 100 % 크로스 브라우저가 작동하는지 고소하지 않습니다. .

출처

2012-02-29 grrrbytes

대체 솔루션 :. 내가 함께 콘텐츠를 생성 CSS로 갈 것

<div style="width:100%;float:left;border-bottom:1px solid"> 
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1> 
</div>

http://jsfiddle.net/VMCax/1/

출처

2012-02-29 16:24:09 MCSI

와우, 빠릅니다. 많은 모든 감사합니다! MCSI에 특별한 감사를드립니다. : before pseudo-element 솔루션에 대한 – grrrbytes

: 실제 제목이 얼마나 오랫동안 예측 될지 예측할 수 없다면 매우 유연하지 않습니다. – grrrbytes

맞습니다. Mixhael, 여러 줄로 나뉘는 제목이있는 경우이 솔루션으로 질문을 불러옵니다. 단락을 고려하여 여러 제목 태그를 쓰지 않는 한 마지막 줄에 밑줄 영향 만 생깁니다. – ckaufman

IE8 +를 지원하므로 내용을 표시하는 데 중요하지 않은 한이 방법을 사용할 수 있습니다.

h1:before{content:"________________"}

jsfiddle here

출처

2012-02-29 16:21:37 Maroshii

는 당신이 더 래퍼 용기 내부의 유동을 달성 할 것입니다 무엇을하려고처럼 보인다. 내부 div (또는 떠 다니는 h1)를 흰색 배경으로 만듭니다. 바깥 쪽 div에 텍스트 div의 줄 높이와 같은 간격으로 반복되는 (repeat-y) 배경이 생기게하십시오.

래퍼 DIV 오버 플로우 (중 하나 떠 사업부를 존중 확인하십시오. 숨기거나 플로트의 끝에 명확한 사업부와

가

이 당신에게 당신이 찾고있는 효과를 줄 것이다 멀티와 함께 작동합니다 라인 타이틀뿐만 아니라

출처

2012-02-29 16:22:03 ckaufman

줄 바꿈하지 않는 공백 및 밑줄 : http://jsfiddle.net/JMVUa/1/

h1:before{ 
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0"; 
    text-decoration: underline; 
}

출처

2012-02-29 16:28:42

당신의 접근 방식과 나의 방식 사이에 어떤 차이가 있습니까? – Maroshii

예, 밑줄 문자가 "실제"밑줄처럼 보이지 않을 수 있습니다. 하지만 어쨌든,이 솔루션은 Mixhael이 원하는 것이 아닙니다. –

CSS : 하우투 블록을 강조하지만, 텍스트를

답변

관련 문제