我想重新创建这个横向规则：
我有双线,但我不知道如何在中心获得某种角色或图像.我想我可以使用：before和：after,但我不知道在这种情况下如何使用它们.为了回答这个问题,让我们试着让中心角色成为一个角色.我稍后会弄清楚图像/图标.
想法？这是我的代码：
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
margin:25px 0px;
}
解决方法
这是我能够制作的截图.请参阅
jsfiddle.net的行动.
这是CSS：
body {
background: #454545;
}
hr {
font-family: Arial,sans-serif; /* choose the font you like */
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
font-size: 1em; /* choose font size you like */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
margin: 20px 10px; /* 20px space above/below,10px left/right */
overflow: visible;
/* ensure 1px gap between borders */
-webkit-Box-sizing: content-Box;
-moz-Box-sizing: content-Box;
-ms-Box-sizing: content-Box;
-o-Box-sizing: content-Box;
Box-sizing: content-Box;
}
hr:after {
content: "§"; /* section sign */
color: #999;
display: inline; /* for vertical centering and background knockout */
background-color: #454545; /* same as background color */
padding: 0 0.5em; /* size of background color knockout */
}
/* opera doesn't render correctly. hide section sign */
x:-o-prefocus,hr:after {
content: "";
}
部分标志
要添加section sign,您可以使用generated content：before或：after.剩下的棘手部分是水平居中,垂直居中和敲出边框.
水平居中
水平居中就像在hr中添加text-align：center一样简单,并确保显示生成的内容：inline.
垂直居中
垂直居中需要一点内联渲染知识.由一行文本消耗的垂直空间由行高确定.即使行高远小于渲染字符的大小,字符仍然显示为完整大小,但占用的空间由行高决定.使用行高：1px实现垂直居中.
敲掉边界
最后,我知道的唯一方法是敲掉标志后面的边框,用另一种颜色覆盖它们.在这种情况下,我们使用与文档其余部分相同的背景颜色,因此它似乎融入.设置适当的背景颜色,然后使用左右填充来控制该部分任一侧的空间大小标志.
边界之间1px的差距
您还会注意到我正在设置Box-sizing：content-Box.这是为了确保边界之间的差距为1px. (另一种替代但等效的设置是盒子大小：border-Box; height：3px;.)
Opera渲染bug
@cimmanon指出了一些Opera渲染错误,所以我决定优雅地降级而不显示部分符号.我认为只显示线条仍然看起来非常整洁和专业.如果你真的想在Opera中使用它,你可以使用不同的标记,例如< div class =“hr”>< / div> (当然更新CSS以匹配).
