Могу ли я иметь несколько псевдоэлементов: before для одного и того же элемента?

Возможно ли иметь несколько :beforeпсевдонимов для одного и того же элемента?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Я пытаюсь применить указанные выше стили к одному и тому же элементу с помощью jQuery, но применяется только последний из них, а не оба сразу.

В CSS2.1 элемент может иметь не более одного псевдоэлемента любого типа в любое время. (Это означает, что элемент может иметь как a, так :beforeи :afterпсевдоэлемент - просто он не может иметь более одного элемента каждого типа.)

В результате, когда у вас есть несколько :beforeправил, соответствующих одному и тому же элементу, все они будут каскадироваться и применяться к одному :beforeпсевдоэлементу, как и к обычному элементу. В вашем примере конечный результат выглядит так:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Как видите, contentвступит в силу только объявление с наивысшим приоритетом (как уже упоминалось, последнее) - остальные объявления отбрасываются, как и в случае с любым другим свойством CSS.

Это поведение описано в разделе « Селекторы» CSS2.1 :

Псевдоэлементы ведут себя так же, как настоящие элементы в CSS, за исключением описанных ниже и в других местах.

Это означает, что селекторы с псевдоэлементами работают так же, как селекторы для обычных элементов. Это также означает, что каскад должен работать точно так же. Странно, но CSS2.1 кажется единственным справочником; ни css3-selectors, ни css3-cascade вообще не упоминают об этом, и еще неизвестно, будет ли это разъяснено в будущей спецификации.

Если элемент может соответствовать нескольким селекторам с одним и тем же псевдоэлементом, и вы хотите, чтобы все они каким-то образом применялись, вам нужно будет создать дополнительные правила CSS с комбинированными селекторами, чтобы вы могли точно указать, что браузер должен делать в этих случаи. Я не могу привести здесь полный пример, включая это contentсвойство, поскольку неясно, например, должен ли быть первым символ или текст. Но для этого комбинированного правила вам нужен селектор .circle.now:beforeили .now.circle:before- какой бы селектор вы ни выбрали, это личное предпочтение, поскольку оба селектора эквивалентны, это только значение contentсвойства, которое вам нужно будет определить самостоятельно.

Если вам все еще нужен конкретный пример, посмотрите мой ответ на этот аналогичный вопрос .

Спецификация наследия CSS3-контент содержит раздел о вставке несколько ::beforeи ::afterпсевдо-элементов с использованием обозначений , которая совместима с CSS2.1 каскадом, но обратите внимание , что этот конкретный документ устарел - он не обновлялись с 2003 года, и никто не имеет реализовали эту функцию в последнее десятилетие. Хорошая новость в том, что заброшенный документ активно переписывается под видом css-content-3 и css-pseudo-4 . Плохая новость заключается в том, что функция множественных псевдоэлементов нигде не встречается ни в одной из спецификаций, вероятно, опять же из-за отсутствия интереса со стороны разработчиков.

Если у вашего основного элемента есть дочерние элементы или текст, вы можете его использовать.

Разместите свой основной элемент относительным (или абсолютным / фиксированным) и используйте оба: до и: после позиционирования абсолютного (в моей ситуации он должен был быть абсолютным, не знаю о вашем).

Теперь, если вам нужен еще один псевдоэлемент, прикрепите absolute: before к одному из дочерних элементов основного элемента (если у вас есть только текст, поместите его в диапазон, теперь у вас есть элемент), который не является относительным / абсолютным / фиксированным .

Этот элемент начнет вести себя так, как будто его владелец - ваш главный элемент.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Я решил это, используя:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Используя семейство шрифтов «font awesome 5 free» для значка, и после этого мы должны указать шрифт, который мы используем снова, потому что, если мы этого не сделаем, навигатор будет использовать шрифт по умолчанию (раз новый римский или что-то вроде этот).