前后使用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. 添加衬垫，以便块放在它们的上方。