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

Ответ 1

В CSS2.1 элемент может содержать только не более одного из псевдоэлементов любого типа в любой момент. (Это означает, что элемент может иметь как псевдо-элемент :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. Плохая новость заключается в том, что множественная функция псевдоэлементов нигде не встречается ни в одной спецификации, по-видимому, опять-таки потому, что ее не интересует.

Ответ 2

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

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

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

Этот элемент начнет действовать, так как его владелец - ваш основной элемент.

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 */
}