在CSS中实现“击倒规则”的最佳方法

Question

我拿到了一个设计，其中有一个特殊的标题样式，其类型是通过去除规则来实现的：

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

我多次尝试此功能，但从未对我的解决方案感到满意。通常需要使用许多元素。由于这些是标题，我希望尽可能保持标记的简洁性。

我这次的第一个想法是利用框折叠的优势: http://jsfiddle.net/cEcCL/ 然而，这里有一些问题:

1. 这依赖于将的背景设置为不透明来排除线条。问题是，这些大多数可能位于页面的上部，其中渐变背景尚未褪色为其固体部分。 2. 实际上，在制作小提琴之前，我不知道这一点——文字似乎略微偏离中心线，不知道为什么。 3. 虽然它可能可以管理，但我担心垂直偏移的稳健性，以使线在文本行框的中位线上居中。如果我有一个长标题跨越两行怎么办？

是否有其他想法？

- prodigitalson

Answer 1

这里有一个非常快速的示例，使用单个h2和before/after伪元素。

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样式以使其更好地工作

- sdleihssirhc

---

+1 我也在考虑类似的事情，但不使用<legend>来作弊。除非有一种方法可以用CSS模拟<legend>的行为，否则很难让它完美地工作。总会存在背景问题（可能是图像或渐变色），而且为线条声明固定宽度的方式相当粗糙。 - Wesley Murch

Answer 2

虽然不是完美的解决方案（我知道这很难），但有时您可以使用background-attachment:fixed通过使用<span>技术来解决背景问题，如果您正在使用背景图像:

演示：http://jsfiddle.net/cEcCL/3/

<h2><span>Text Content</span></h2>

h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
    background:url(background.gif) fixed;    
}
h2 {
    line-height: 10px;
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
}
h2:after{
    content:" ";
    float:left;
    border-bottom: 1px solid #000;
    width:100%;
    height:10px;
    margin-top:-15px;
}

当然，这仅适用于父元素可以有固定的背景图片，并且无法使用CSS3渐变背景。这是一个有限的想法，但我只是想提出来。

似乎只有

标签具有这种行为，我不知道如何使用CSS模拟它，而且我认为你不想开始使用作为标题...

- Wesley Murch

---

+1，很好。我不知道为什么没有想到使用:before/:after。这非常强大...我将所有的偏移量都改成了em，这样我就可以轻松调整字体大小了。 - prodigitalson

伪元素总是最先考虑的事情，这几乎像作弊一样。是的，这段代码可以被修剪，你可以切换到h2的border-bottom和span的相对位置，而不是使用:after内容，这样你可以支持IE和其他浏览器。当我在尝试这种方法时，背景图像的问题突然闯入了我的脑海，所以这就像是一个混合解决方案。既然你确实需要span，那么最好充分利用它。 - Wesley Murch

哦...对我来说是一个很明显的时刻。直到现在我才意识到当我读到你的评论时，我实际上不需要 :after，我可以使用我的原始方法...使修复的部分是您提供的关于背景附着的提示，以及我对基于 em 的偏移量所做的更改。 - prodigitalson