다이나믹 : 의사 요소 후

내 머리가이 둘레로 감싸고 있지 않습니다. :before 및 :after 의사 요소가 h1에 있습니다. 내 h1의 사용자는 100% width입니다.다이나믹 : 의사 요소 후

열린 간격, 포스트 텍스트를 채우는 반복 된 배경 그래픽이 되길 원하지만이 작업을 동적으로 만드는 방법을 알아낼 수는 없습니다 (예 : 제목이 "집"또는 "전체"인지 여부). Awesome Products "인 경우 :after은 100 %가 끝날 때까지 반복됩니다.

예 :

.main h1:before { 
    content:""; 
    display:inline-block; 
    background:url(images/before-services.jpg); 
    width:18px; 
    height:14px; 
    margin-right:10px; 
} 
.main h1 { 
    color:#373737; 
    text-shadow:0px 2px #5ac166; 
    text-transform:uppercase; 
    font-family: 'Mister Giacco Bold'; 
    font-size:2em; 
    width:100%; 
} 
.main h1:after { 
    content:""; 
    display:inline-block; 
    background:url(images/after-services.jpg) repeat-x; 
    width:80%; 
    height:15px; 
    margin-left:10px; 
}

출처

2014-01-13 Solomon Hodge

"*는이 공극을 채우고 *"? – Abhitalks

원하는 출력물을 가진 이미지가 크게 도움이 될 것입니다. 그렇지 않으면 몇 가지 잘못된 답변을 얻을 수 있습니다. –

다음과 같은 것을 찾으십시오 : http://jsfiddle.net/abhitalks/53nfU/? – Abhitalks

나는이 일 것이라고 생각

있지만 추가 <span>

Codepen Demo

HTML을 필요로

<h1><span>A Fancy Title</span></h1>

CSS

h1 { 
    text-align:center; 
    position:relative; 
    display:inline-block; 
    width:100%; 
} 

h1 span { 
    display: inline-blspaock; 
    position: relative; 
} 

h1 span:before, 
h1 span:after { 
    content: ""; 
    position: absolute; 
    height: 100%; 
    background-color: red; 
    top: 0; 
    width: 100%; 
} 

h1 span:before { 
    right: 100%; 
    margin-right: 15px; 
} 
h1 span:after { 
    left: 100%; 
    margin-left: 15px; 
}

출처

2014-01-13 17:00:28

당신이 사실상 h1에 overflow:hidden 유용 할 것 중 하나를 선택, 부정적인 바로 margin와 :after의 제로 폭을 줄이거 나 absoluteposition에서 설정할 수 있습니다. 공극 :

h1:before { 
    content:""; 
    display:inline-block; 
    background:red; 
    width:18px; 
    height:14px; 
    margin-right:10px; 
} 
h1 { 
    color:#373737; 
    text-shadow:0px 2px #5ac166; 
    text-transform:uppercase; 
    font-family: 'Mister Giacco Bold'; 
    font-size:2em; 
    overflow:hidden; 
} 
h1:after { 
    content:""; 
    display:inline-block; 
    background:blue; 
    width:100%; 
    height:15px; 
    margin-left:10px; 
    margin-right:-100%;/* reduce virtually size to 0 or use position:absolute + margin-top:~ 0.4em */ 
}

http://codepen.io/anon/pen/wzGuh

출처

2014-01-13 22:25:54

다이나믹 : 의사 요소 후

답변

관련 문제