在元素之间显示伪元素

Question

我一直试图找出如何在集合中的每个元素之间显示::after伪元素。

HTML：

<div class="outer">
    <div class="element">Hello</div>
    <div class="element">World</div>
    <div class="element">!</div>
</div>

CSS：

.outer .element:not(.outer > .element:last-child)::after
{
    content:"";
    display:inline-block;
    background:url(images/test.png);
    width:4px;
    height:5px;
}

我的理解是，我的CSS定位的所有元素都是element类，其元素的类outer不是该集合中的:last-child。我想我错了，或者我尝试的是不可能的？

这是可能的，如果是的话，怎么样？

Answer 1

你可以使用它：

outer .element + .element:before
{
    content:"";
    display:inline-block;
    background:url(images/test.png);
    width:4px;
    height:5px;
}

这是adjacent sibling selector语法。

编辑：在伪类

之前交换

编辑2：demo

Answer 2

您可以更简单地编写选择器： DEMO

.outer .element + .element:before {/* your CSS rules */}

相反，您的目标是来自第二个的每个元素，并使用:before伪。这将更好地工作，并将提高兼容性。