css - 在 CSS 中完成淘汰规则的最佳方法

Question

我收到了一个具有特定标题的设计，该标题的样式类型敲定了如下规则:

------ Text Content ------

这些年来我做过几次这样的事情，但我对我的解决方案从来都不满意。通常它涉及使用许多元素。由于这些是 header ，因此我希望尽可能保持标记精简。

这次我的第一个想法是使用盒子折叠对我有利:http://jsfiddle.net/cEcCL/

但是这里有一些问题:

1. 这依赖于将 span 的背景设置为不透明的内容，以便删除该行。问题是其中大部分可能会出现在页面的上部，那里的渐变背景还没有淡化成纯色

2. 实际上，在我制作 fiddle 之前我并没有意识到这一点 - 文本似乎稍微偏离了中心，不知道为什么会这样。

3. 虽然它可能是可以管理的，但我担心垂直偏移的稳健性以使行居中于文本行框的中间位置。如果我的标题很长，达到 2 行怎么办？

有没有人有任何其他想法？

Answer 1

Here's a very quick example它使用单个 h2 和前后伪元素。

h2:before, h2:after {
    content:' '; display:inline-block;
    height:0; width:100px;
    border-top:1px solid black;
    vertical-align:middle;
    margin:0 1em
}

显然，有一些缺点:

• 不支持 IE6/7
• 就目前而言，您必须明确声明线条的宽度(但您可能会弄乱它)
• 不能很好地处理多行，但同样，您可以编辑 h2 样式以使这项工作更好一些