html - 在缩放时对齐标题标签伪元素背景图像？

Question

在摆弄伪元素 css 相当长一段时间后，我想出了一个解决标题标签双端自定义图像下划线的方法，我需要使用以下代码:

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 的 bottom 属性以匹配边框的相同位置。

在你的 h2 上删除这一行:

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

而是添加这一行:

border-bottom: 7px solid #000;

在您的 :before 和 :after css 中，将您的 bottom 属性更改为带有边框线的 macth:

bottom:-9px;

Fiddle