css - H2 跨度背景 - 宽度 : Auto not working as it should

Question

我带着更多问题回来了!

这可能是非常简单的事情，但它让我感到困惑。我有一个布局设置，以便页面和帖子 (Wordpress) 上的 H2 文本在两侧旁边都有一个背景图像，这是通过使用 span:before 和 span:after 完成的。

这是它如何正确工作以及我希望整个 CSS 实现的目标:

http://www.weburton.co.uk/content/demo/?page_id=121

目前这是通过 CSS 中的 min 和 max-widths 实现的。我已经将宽度部分设置为自动，它位于具有页面宽度的父元素下。我不明白线条如何不会根据 H2 的宽度自动调整大小。看，这里的问题:

http://www.weburton.co.uk/content/demo/?p=36

这是使用的 CSS:

#pagewrapper{ 
    width: 960px;
    margin: 0 auto;
    position: relative; 
    padding-top: 140px;
    text-transform: uppercase;
}

h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%;  position:absolute; min-width: 25%; max-width: 50%; width: auto;  margin-top: 15px; }

基本上，我已经用尽了所有我能想到的选项。有没有我在这里遗漏的东西，或者是否有另一种方法可以使用其他东西来实现这种样式，但 span 更容易？

哦，我知道我有一些多余的样式调用，我正在清理它。 :)

提前致谢! :)

Answer 1

也许这就是你想要的

从h2 span:before和h2 span:after中移除min-width和max-width

h2 span {
    position:relative;   
}
h2 span:before {
    left: -25%;
    width: 20%;
}
h2 span:after {
    right: -25%;
    width: 20%;
}