html - 花式边框分隔线

Question

我正在尝试创建以下内容(注意两端的 1 像素间隙):

Answer 1

如果你尝试:

<hr class="fancy">

使用以下 CSS:

hr.fancy {
    border: 1px solid black;
    border-width: 1px 0px;
    color: black;
    height: 5px;
    position: relative;
}
hr.fancy:after {
    content: '\A';
    position: absolute;
    bottom: -1px;
    right: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-left: 1px solid white;
}
hr.fancy:before {
    content: '\A';
    position: absolute;
    bottom: -1px;
    left: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-right: 1px solid white;
}

看看:http://jsfiddle.net/audetwebdesign/P7umD/

您可以调整像素宽度以获得更大胆的外观。

浏览器兼容性
我在 Firefox 和 Chrome 中对此进行了检查，标记呈现一致。

但是，在 IE9 中不起作用，您只会得到双线，而不会得到书尾。