Использование псевдоязычного класса CSS до и после

Question

Итак, я попытался поэкспериментировать с псевдоязыком CSS до и после. Я попытался использовать эти псевдо для создания элемента заголовка. Это сокращение с помощью div для хранения левого и правого изображений. Это код HTML

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

Так у меня есть 3 изображения, чтобы создать традиционный элемент заголовка, который 20px ширину левой и правой стороны с 100px высоты и средней ширины, 1px и 100px высотой, которая будет повторяться по горизонтали. А вот мой 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 элемент, он будет выровнять идеально, но если я ставлю эти элемента, он будет толкать :: после псевдо-класс вниз, и это займет оставшиеся места по к нему height.How можно сделать, чтобы этот элемент h1 занимал только среднее пространство, не затрагивая :: after space?

Answer 1

Я сделал скрипку с вашим примером: http://jsfiddle.net/3Dcw3/ (только установить ширину до 500, чтобы поместиться в скрипку и установить фон, чтобы визуализировать их)

А вот Исправленная версия: http://jsfiddle.net/3Dcw3/1/

Точки являются :

1. Добавить position:relative; в заголовок.
2. Используйте абсолютное позиционирование вместо плавающего.
3. Добавить paddings, чтобы блоки располагались над ними.