Выравнивание заголовка флагов псевдоэлементов с помощью масштабирования?

Question

После возни с псевдо элементом CSS в течение довольно долгое времени я пришел с решением на заголовок тег двухпоточного подчеркивание пользовательских изображений I требуется, используя следующий код:

h2{ 
clear:both; 
position:relative; 
color:#000; 
margin-left:83px; 
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x; 
font-size:1.5em; 
float:left; 
padding:0px 0px 10px 0px; 
} 

h2:after, 
h2:before{ 
content:" "; 
background:url(http://i.stack.imgur.com/AulCS.png); 
display:block; 
width:83px; 
height:31px; 
position:absolute; 
bottom:0; 
left:0; 
margin-left:-83px; 
margin-bottom:-10px; 
z-index:-1; 
} 

h2:after{ 
background:url(http://i.stack.imgur.com/ux1ed.png); 
right:0; 
left:auto; 
margin-right:-83px; 
} 

<h2>Frequently Asked Questions</h2> 
<br> 
<h2>Home</h2> 

Что можно увидеть здесь :

http://jsfiddle.net/848s2335/1/

Однако я заметил, что 3 фоновые изображения, кажется, не стоять в очереди, когда страница будет увеличено и снаружи. Пожалуйста, может ли кто-нибудь указать мне в правильном направлении, чтобы постоянно держать все три изображения в очереди?

Благодарим за помощь.

Answer 1

Вместо этого используйте фоновое изображение, используйте border-bottom, это установит линию внизу h2, затем установите нижнее свойство after и before для соответствия с тем же положением границы.

Удалить эту линию на ваш h2:

background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x; 

Вместо добавить эту строку:

border-bottom: 7px solid #000; 

в ваш: до и: после того, как CSS, изменить нижнее свойство Macth с пограничной линией:

bottom:-9px; 

Fiddle

Answer 2

Вы можете задать высоту набора элементов h2. Я добавил высоту 27px, и она работала для меня в вашем Fiddle:

h2 { 
    clear: both; 
    position: relative; 
    color: #000; 
    margin-left: 83px; 
    background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x; 
    font-size: 1.5em; 
    float: left; 
    padding: 0px 0px 10px 0px; 
    height: 27px; 
} 

Answer 3

мне удалось сделать левый конец всегда оставаться в строке:

• установка всех элементов height в то же самое значение (я использовал 62px)
• установки background-repeat: no-repeat и background-position: center на обоих концах
• регулировки других значений (padding и т.д.)

скрипку: http://jsfiddle.net/ecpv2kv0/

Правый конец подоконника как 0.5px из линии, но, вероятно, редактирование изображений в формате PNG иметь даже значение высоты (сейчас это 31px) может помочь здесь.