如何在标题文本上创建字段集图例样式的"背景线"？

Question

我正在尝试设置标题文字的样式,类似于默认图例文字在字段集中的显示方式; 也就是说,我想要一条类似删除线的行,而不是通过文本.我似乎无法找到有关如何实现这一目标的任何信息,因为在许多其他问题上,Google总是指示我使用Stack Overflow获取答案,我认为有人可以给我建议.

为了更清晰.我试图在标题文本上获得此效果:

                               中心标题文本                               

有没有办法做到这一点？

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/jm4VQ/

如果文本需要换行,这将无效.在IE7中,没有行.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}