Question

我的任务是在内容块之间创建一个分隔符，这些内容块中间有一个图像，两边的两行与图像中心对齐。以下是我为解决方案设定的目标：

单伪元素解;没有添加标记
响应
最小的CSS
没有JS

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

它有效，但它有一些问题：

哈克
如果你让线路更长，那么使其响应的唯一方法就是媒体查询
非常狡猾地将“边界”放在正确的位置（因为我不确定破折号有多宽）
仅适用于某些字体（某些字体在其破折号之间有空格）
无法更改线条的粗细

有更好的方法吗？

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

CSS分隔符伪元素，图像和两边的线？

1 个答案: