Html CSS分隔符伪元素，两边有一个图像和一条线？ 我的任务是在中间有一个图像的两个内容块之间建立一个分隔符，两边的中心线与图像对齐。以下是我为解决方案设定的目标： 单伪元解；没有添加标记 响应的 最小CSS 没有JS

（从项目上下文中删除）。基本上，我在伪元素的

content

属性中有一些“–”，其中

color

设置为transparent。然后我制作两个

文本阴影

s，并将它们放置在两侧

这是可行的，但也有一些问题：

哈奇

如果你把台词加长了，唯一能让它响应的方法就是媒体查询

非常灵活地将“边界”设置在正确的位置（因为我不确定虚线的宽度）

仅适用于某些字体（某些字体的破折号之间有空格）

无法更改线条的厚度

---

有更好的方法吗？

有趣的方法。我对带有两个变体的行使用了

：before

伪选择器

背景图像是一个base64编码的1px白色PNG

第一个变奏完全穿过圆圈。

：after

伪元素具有更高的

z索引

&:before{
背景图像：url（“数据：image/png；base64，ivborw0kggoaaaansuheugaaaaaaabcaaac1hawcaac0leqvr42mp4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=”）；
背景重复：重复-x；
背景位置：中心；
内容：''；
显示：块；
宽度：10em；/*此处猜测需求*/
高度：4em；
位置：绝对位置；
底部：2米；/*之前高度的一半*/
左：50%；/*将其移动到50%以上*/
左边距：-5em；/*并将其向后拉一半宽度*/
z指数：1；
}

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

&:before{
背景图片：url（“数据：image/png；base64，ivborw0kggoaansuheugaaaaaaabcaaaabcaaaaaabcaaaaaaaaaaqvr42mp4/x8aaawab/2+Bq7YAAAAASUVORK5CYII=”），url（“数据：image/png；base64，ivborw0kggoaansuheugaaaaabcaaqaaaqaqaqaqaqaqaqalvr42mp4/x8aaawab/2+bq7yaaaauvork5cyii=”）；
背景重复：无重复；
背景位置：左中、右中；
背景尺寸：50px2px，50px2px；
内容：''；
显示：块；
/*继续使用相同的大小和定位工具*/
}

这是笔：
不错，我忘了可以有>1个背景图像。这是一个非常好的方法。