Html 有没有一种方法可以在CSS中使用multiple:before和：after伪元素？

目前，我有这个标记，它表示一个图标容器和一些元素，其中的CSS样式最终显示为图形图标

    <div class="icon">
        <div class="icon-element1"></div>
        <div class="icon-element2"></div>
        <div class="icon-element3"></div>
    </div>

根据图标的复杂性，子元素的数量可能会有所不同

我想要的是以某种方式尽可能多地移动到CSS样式表，这样理想情况下，我将只有

，其余的将仅从CSS样式进行渲染，这在概念上接近于

：before/：after

，一种虚拟div。我不想使用JavaScript动态添加元素。如果我们有多个

：before/：after

，就有可能做到这一点

下面是我使用上面的标记获得的图标示例：

如您所见，有3个子元素表示灰色、白色屏幕和绿松石色按钮

请告知我如何简化此标记，以便每次显示此图标时不必放置所有div。

您可以使用

在本例中，选择器将有效地设置

.icon

的第二个子项的样式

您不需要冗余的

.icon元素

类

我知道您说过子元素的数量会有所不同，但是，此方法与您当前使用的方法之间没有任何区别，只是减少了标记—这正是您想要的

---

此外，还有可以有效使用的图标。

如果您在

上设置

位置：相对
，并绝对定位伪元素，则只需使用
:before
和
:before
即可在图像中实现图标：


（未在IE中测试）

但是你说得很对，对于包含三个以上部分的图标来说，仅仅
：：before
和
：：after
是不会被剪切的

如果图标仅由平面颜色（或渐变）区域组成，则多个渐变背景可能适用于具有更多元素的图标：


您甚至可以在一个渐变背景中使用锐利的渐变边界执行相同的操作：


当然，您可以使用实际的背景图像文件，也可以使用渐变来代替渐变

正如您所看到的，如果您尝试使用渐变背景制作图标，与实际元素或伪元素的样式设计相比，CSS要精细得多。如果你将其吸收并放入HTML元素中，并按照其他地方的建议使用
：nth child
，可能会使代码更清晰。
我认为OP不想为图标中的每个可能的div添加HTML。@JuanMendes这是什么意思？嗯，理想情况下，如果可能的话，我不想将所有这些div都放入其中。因此，我希望能够使用CSS删除和渲染其余的内部元素，比如：before或：after。@JoshC这迫使您为可能需要的每个元素放置一个div，OP希望通过CSS来控制它，我不是说possible@SergeyBasharov因为你说的是图标，您可能希望签出或假定它们是类名所示的图标。。我不久前写的这个答案有点相关。您使用的是哪种CSS代码？你正在渲染的“其余部分”是什么？我认为这是你能得到的最接近OP要求的部分。另一种方法是只使用背景图像作为精灵。。。我仍然认为，最好的解决方案是保持标记清晰，而不是用
：before
和
：after
来欺骗它，将您可能需要的所有div都放在那里，这样其他人就不必在代码中到处寻找以了解发生了什么（因为您在开发工具的元素面板中看不到伪元素）@JuanMendes：是的，我同意-我认为对徽标的每个部分使用HTML元素更具可读性。
.icon:nth-child(2) {
    color:red;
}

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background: #666;
}

.icon::before,
.icon::after {
    content: '';
    position: absolute;
    width: 120px;
    left: 20px;
}

.icon::before {
    height: 80px;
    top: 20px;
    background: #fff;
}

.icon::after {
    height: 20px;
    bottom: 20px;
    background: #00b9ae;
}

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background-color: #666;
    background-image: linear-gradient(to bottom, #fff 0%, #fff 100%)
                    , linear-gradient(to bottom, #00b9ae 0%, #00b9ae 100%)
                    , linear-gradient(to bottom, #000 0%, #000 100%);
    background-size: 120px 40px
                   , 120px 20px
                   , 120px 20px;
    background-position: 20px 20px
                       , 20px 80px
                       , 20px 120px;
    background-repeat: no-repeat;
}

background-image: linear-gradient(to bottom, 
                  #fff 0px, #fff 40px,
                  rgba(0,0,0,0) 40px, rgba(0,0,0,0) 60px,
                  #00b9ae 60px, #00b9ae 80px,
                  rgba(0,0,0,0) 80px, rgba(0,0,0,0) 100px,
                  #000 100px, #000 120px);
background-size: 120px 120px;
background-position: 20px 20px;