前後使用CSS僞類

Question

所以我試着在CSS前後嘗試CSS僞類。我試圖使用這些僞創建標題元素。這是爲了減少使用div來保存左和右圖像。這是爲HTML

<header id="mastHead"> 
     <h1><a href="#">Branding</a></h1> 
    </header> 

代碼所以我有3個圖像來創建傳統頭元件，它是20像素寬度爲左側和右側100像素高度和用於中間，1px的寬度和高度100像素，其將重複水平的。在這裏，我的CSS

#mastHead { 
     background:url(images/headMiddle.jpg) repeat-x top left; 
     width:1000px; 
     height:100px; 
     overflow:hidden; 
    } 

    #mastHead:before { 
     content:""; 
     display:block; 
     background:url(images/headLeft.jpg) no-repeat top left; 
     width:20px; 
     height:100px; 
     float:left; 
    } 

    #mastHead:after { 
     content:""; 
     display:block; 
     background:url(images/headRight.jpg) no-repeat top left; 
     width:20px; 
     height:100px; 
     float:right; 
    } 

    #mastHead h1 a { 
     display:block; 
     width:200px; 
     height:41px; 
     background:url(images/logo.png) no-repeat; 
    } 

所以，問題是，如果我刪除h1元素，它會完全一致，但如果我把這些元素，這將推動:: after僞堂課下來，而且需要根據剩餘空間到它的高度。我可以如何讓這個h1元素只佔用中間空間而不會影響::空間之後？

Answer 1

我做了一個擺弄你的榜樣：http://jsfiddle.net/3Dcw3/（只設置寬度500，可安裝在小提琴和設置背景，它們可視）

這裏是一個固定的版本：http://jsfiddle.net/3Dcw3/1/

點是：

1. 將position:relative;添加到標題。
2. 使用絕對定位而不是浮動。
3. 添加襯墊，以便塊放在它們的上方。