是否可以在CSS内容中使用两个图标，一个在另一个

Question

我有一个如下所示的 css 类

.fa-unsorted:before, .fa-sort:before {
    content: '\e9c2';
    margin-top: -10px;
    color: #999999;
    font-family: 'icomoon';
}

显示如下

我想要的也包括在内，\e9c1但它应该显示在下面\e9c2。

对于上下文，我使用的库具有提到的 css 类来显示排序图标。它使用 fa-sort，它在同一图标中同时具有向上和向下箭头。

但我使用的 icomoon 没有这种替代品。所以我需要用两个图标来显示排序。以下是我想要的

我尝试关注内容，但正如预期的那样，箭头显示在彼此旁边。

content: '\e9c2\e9c1';

添加另一个类会很好，但我无法控制 JS 来添加新类。

Answer 1

您不能向 :before 伪元素添加多个以上。

如果 :after 元素尚未被使用，我建议这样做：

  .fa-unsorted:before, .fa-sort:before {
        content: '\e9c2';
        margin-top: -10px;
        color: #999999;
        font-family: 'icomoon';
    }

    .fa-unsorted:after, .fa-sort:after{
        content: '\e9c1';
        margin-top: -15px;
        color: #999999;
        font-family: 'icomoon';
        right:0;
    }