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

Question

我已经交了一个设计,有一个特殊的标题风格类型敲出一个规则,如:

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

多年来我已经做了几次,但我对我的解决方案感到满意.通常涉及使用众多元素.因为这些是标题ID,以便尽可能保持标记的精简.

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

但是这里有一些问题:

1. 这依赖于将背景设置为span不透明的东西以便敲除线条.问题是大多数这些可能在页面的上部,渐变背景尚未褪色为实体

2. 实际上我没有意识到这一点,直到我做了小提琴 - 文字似乎略微偏离中心,不知道为什么会这样.

3. 虽然它可能是可以管理的,但我担心垂直偏移的稳健性使文本行框的中间线居中.如果我有2个行的长标题怎么办？

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

Answer 1

这是一个使用单个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样式以使这项工作更好一些