css – 如何在标题文本上创建一个字段集传奇风格的“背景线”?

我试图将标题文本类似于 default legend text在fieldsets中的显示方式;也就是说,我想要一条删除线的线条,而不是通过文本.我似乎没有找到有关如何完成这一点的任何信息,而且由于Google的许多其他问题总是引导我进行Stack Overflow的回答,我认为这里有人可能会给我建议.

为了更清楚我试图在标题文本中获得此效果

中心标题文字

有没有办法做到这一点?

解决方法

见: 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;
}

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...