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

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

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

Я намагаюся застосувати вищевказані стилі до одного і того ж елемента за допомогою jQuery, але застосовується лише останній, ніколи не обидва.

У CSS2.1 елемент може мати лише максимум один із псевдоелементів у будь-який час. (Це означає, що елемент може мати як а, так :beforeі :afterпсевдоелемент - він просто не може мати більше одного з кожного виду.)

Як результат, коли у вас є кілька :beforeправил, що відповідають одному і тому ж елементу, всі вони будуть каскадно застосовуватись до одного :beforeпсевдоелемента, як до нормального елемента. У вашому прикладі кінцевий результат виглядає приблизно так:

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

Як бачите, contentнабирає чинності лише декларація, яка має найвищий пріоритет (як уже згадувалося, та, яка є останньою) - решта декларацій відкидаються, як це стосується будь-якого іншого властивості CSS.

Така поведінка описана в розділі " Селектори" CSS2.1 :

Псевдоелементи поводяться так само, як реальні елементи в CSS, за винятком, описаним нижче та в інших місцях.

Це означає, що селектори з псевдоелементами працюють так само, як і селектори для нормальних елементів. Це також означає, що каскад повинен працювати так само. Як не дивно, CSS2.1 видається єдиним посиланням; ні css3-селектори, ні css3-каскад про це взагалі не згадують, і залишається зрозуміти, чи буде це уточнено в майбутній специфікації.

Якщо елемент може збігатися з декількома селекторами з одним і тим же псевдоелементом, і ви хочете, щоб усі вони якось застосовувались, вам потрібно буде створити додаткові правила CSS з комбінованими селекторами, щоб ви могли точно вказати, що повинен робити браузер у цих справ. Я не можу навести повний приклад, включаючи contentтут властивість, оскільки не зрозуміло, наприклад, чи символ або текст мають бути першими. Але селектор, який вам потрібен для цього комбінованого правила, є .circle.now:beforeабо .now.circle:before- будь-який вибраний вами вибір - це особисті переваги, оскільки обидва селектори еквівалентні, це лише значення contentвластивості, яке вам потрібно буде визначити самостійно.

Якщо вам ще потрібен конкретний приклад, дивіться мою відповідь на це подібне запитання .

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

Якщо ваш основний елемент містить деякі дочірні елементи або текст, ви можете ним скористатися.

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

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

Цей елемент почне діяти так, як його власник - ваш головний елемент.

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" для піктограми, і після цього, ми повинні вказати шрифт, який ми використовуємо знову, тому що, якщо ми цього не зробимо, навігатор буде використовувати шрифт за замовчуванням (рази нові римські або щось подібне це).