CSS分隔符伪元素，两边都有一个图像和一条线？

Question

我的任务是在内容块之间制作分隔符，中间有一张图片，两边有两条与图片中心对齐的线。以下是我为解决方案设定的目标：

1. 单伪元素解；未添加标记
2. 响应式
3. 最少的 CSS
4. 没有 JS

This is what I came up with（从项目上下文中删除）。基本上，我在伪元素的content 属性中有一些“–”，color 设置为透明。然后我制作两个text-shadows 并将它们放在两边。

它可以工作，但它有一些问题：

1. 哈奇
2. 如果您将行加长，则使其响应的唯一方法是媒体查询
3. 将“边框”放在正确的位置真的很麻烦（因为我不确定破折号的宽度）
4. 仅适用于某些字体（某些字体的破折号之间有空格）
5. 无法更改线条的粗细

有没有更好的方法来做到这一点？

Answer 1

有趣的一个。我使用:before 伪选择器作为有两个变体的行。

背景图片是来自http://px64.net/的base64编码的1px白色PNG

第一个变体完全穿过圆圈。 :after 伪元素具有更高的z-index。

&:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=");
    background-repeat: repeat-x;
    background-position: center center;
    content:' ';
    display:block;

    width:10em;        /* guessing the reqs here */
    height:4em;

    position: absolute;
    bottom: 2em;       /* half the :before's height */
    left: 50%;         /* move it over 50% */
    margin-left: -5em; /* and pull it back by half of its width */
    z-index: 1;
}

第二个变化可能更接近你想要的。它使用 1X1px 图像的两个副本，将它们放在框的任一侧，然后使用 background-size 属性将它们拉伸成线条。

&:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII="), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: 50px 2px, 50px 2px;
    content:' ';
    display:block;
    /* continues with same sizing and positioning stuff.*/
}

这是笔：http://codepen.io/anon/pen/AljJn