是否可以在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伪元素中添加多个。

我建议在以下情况下执行此操作：在元素尚未使用之后：

  .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;
    }

Answer 2

你可以简单地使用伪两个，:before＆amp; :after，然后用箭头按照自己的意愿设置它们。

Answer 3

您可以使用icomoon嵌入图标(ea7f)并使用transform来旋转span元素，如下所示：

.icon-embed--vertical {
  display: inline-block;
  transform: rotate(90deg);
}

.icon-embed::before {
  content: "◀▶";  /* Actual icon here: content: "\ea7f";*/
  font-size: .6em; /* styling */
}

<button>Date Created <span class="icon-embed icon-embed--vertical"></span></button>

Answer 4

只需使用另一个伪元素，即：::after：

.my-icon::after,
.my-icon::before {
    color: #999;
}

my-icon::after {
    content: '\e9c1';
}

my-icon::before {
    content: '\e9c2';
    margin-top: -10px;
}

P.S。与psuedo-classes不同，伪元素应该有两个双冒号，即::: 之后：after。 #justsayin