我想重新制作这个水平线：
我已经有了双线，但是我不知道如何在中心放置某种字符或图像。我想我可以使用: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: "";
}
要添加章节符号，您可以使用生成内容与:before或:after。其余棘手的部分是水平居中、垂直居中和边框抠掉。
水平居中只需在hr上添加text-align: center，并确保生成的内容为display: inline。
垂直居中需要一些关于行内渲染的知识。一行文本所占据的垂直空间由line-height确定。即使line-height比呈现字符的大小小得多，字符仍然以全尺寸显示，但它占用的空间由line-height决定。使用line-height: 1px实现垂直居中。
最后，我所知道的去除章节符号背景边框的唯一方法是用另一种颜色覆盖它们。在这种情况下，我们使用与文档其余部分相同的背景颜色，使其看起来融为一体。设置适当的background-color，然后使用左右padding来控制章节符号两侧的空间大小。
您还会注意到，我正在设置box-sizing: content-box。这是为了确保边框之间的间隙为1像素。（一个替代但等效的设置将是box-sizing: border-box; height: 3px;。）
@cimmanon指出了一些Opera渲染错误，因此我决定优雅地降级并不显示章节符号。我认为仅显示线条仍然看起来非常整洁和专业。如果您真的想在Opera中使其工作，则可以使用不同的标记，例如<div class="hr"></div>（当然需要更新CSS以匹配）。
hr元素不允许before/after伪元素溢出。 - cimmanonhr.hr--logo {
border-top: solid #000 1px;
margin: 50px 0;
}
hr.hr--logo:after {
content: url( 'logogram.svg' );
/* Controls the position of the logo */
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
/* Controls the whitespace around the symbol */
padding: 20px;
background: #fff;
}<hr class="hr--logo">既然您已经有一些CSS，不妨给它添加一个背景图片和高度：
hr {
... your css ...
background:url(path to your image) no-repeat center;
height:15px;
}
<hr> 标签，就可以获得一个正确居中和格式化的分隔符。 - Ibu这听起来有点傻，但你可以尝试使用两个半角的水平线和不间断空格，在它们之间插入图片。
<hr><img><hr>
在标签之间没有空格或换行符。
overflow: hidden一样作用，导致:before完全隐藏，除非你给hr一个足够大的高度来显示字形。 - cimmanon:after。 - Chris Calo