html - 是否可以在 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;
    }