Czy mogę mieć wiele: przed pseudoelementami dla tego samego elementu?

Czy można mieć wiele :beforepseudo dla tego samego elementu?

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

Próbuję zastosować powyższe style do tego samego elementu za pomocą jQuery, ale stosowany jest tylko najnowszy, nigdy oba.

W CSS2.1 element może mieć tylko jeden z dowolnego rodzaju pseudoelementu w dowolnym momencie. (Oznacza to, że element może mieć zarówno element :beforea, jak i :afterpseudoelement - po prostu nie może mieć więcej niż jednego elementu każdego rodzaju).

W rezultacie, gdy masz wiele :beforereguł pasujących do tego samego elementu, wszystkie będą kaskadowo stosowane do pojedynczego :beforepseudoelementu, tak jak w przypadku zwykłego elementu. W Twoim przykładzie wynik końcowy wygląda następująco:

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

Jak widać, tylko contentdeklaracja, która ma najwyższy priorytet (jak wspomniano, ta, która jest ostatnia) odniesie skutek - reszta deklaracji zostanie odrzucona, tak jak w przypadku każdej innej właściwości CSS.

To zachowanie jest opisane w sekcji Selektory w CSS2.1 :

Pseudoelementy zachowują się jak prawdziwe elementy w CSS z wyjątkami opisanymi poniżej i gdzie indziej.

Oznacza to, że selektory z pseudoelementami działają tak samo, jak selektory normalnych elementów. Oznacza to również, że kaskada powinna działać w ten sam sposób. O dziwo, CSS2.1 wydaje się być jedynym odniesieniem; ani css3-selectors, ani css3-cascade w ogóle o tym nie wspominają i okaże się, czy zostanie to wyjaśnione w przyszłej specyfikacji.

Jeśli element może dopasować więcej niż jeden selektor do tego samego pseudoelementu i chcesz, aby wszystkie z nich w jakiś sposób zostały zastosowane, będziesz musiał utworzyć dodatkowe reguły CSS z połączonymi selektorami, abyś mógł dokładnie określić, co przeglądarka powinna w nich robić przypadkach. Nie mogę podać pełnego przykładu zawierającego contentwłaściwość tutaj, ponieważ nie jest na przykład jasne, czy symbol lub tekst powinien być na pierwszym miejscu. Ale selektor, którego potrzebujesz dla tej połączonej reguły, to albo .circle.now:beforealbo .now.circle:before- niezależnie od tego, który selektor wybierzesz, jest preferencją osobistą, ponieważ oba selektory są równoważne, jest to tylko wartośćcontent właściwości będziesz potrzebować samodzielnie zdefiniować.

Jeśli nadal potrzebujesz konkretnego przykładu, zobacz moją odpowiedź na to podobne pytanie .

Starsza specyfikacja treści css3 zawiera sekcję dotyczącą wstawiania wielu ::beforei ::afterpseudoelementów przy użyciu notacji zgodnej z kaskadą CSS2.1, ale należy pamiętać, że ten konkretny dokument jest przestarzały - nie był aktualizowany od 2003 r. I nikt nie wdrożyła tę funkcję w ciągu ostatniej dekady. Dobra wiadomość jest taka, że ​​porzucony dokument jest aktywnie przepisywany pod postacią css-content-3 i css-pseudo-4 . Zła wiadomość jest taka, że ​​cecha wielu pseudoelementów nigdzie nie występuje w żadnej ze specyfikacji, prawdopodobnie z powodu braku zainteresowania implementującego.

Jeśli twój główny element ma jakieś elementy potomne lub tekst, możesz to wykorzystać.

Ustaw swój główny element względny (lub bezwzględny / ustalony) i użyj obu: przed i: po pozycjonowanym absolutnym (w mojej sytuacji musiał to być absolutny, nie wiem o twoim).

Teraz, jeśli chcesz jeszcze jednego pseudoelementu, dołącz absolut: przed jednym z dzieci elementu głównego (jeśli masz tylko tekst, umieść go w rozpiętości, teraz masz element), który nie jest względny / absolutny / ustalony .

Ten element zacznie zachowywać się tak, jakby jego właściciel był Twoim głównym elementem.

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

Rozwiązałem to za pomocą:

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

Używając rodziny czcionek „font awesome 5 free” dla ikony, a następnie musimy ponownie określić czcionkę, której używamy, ponieważ jeśli tego nie zrobimy, nawigator użyje domyślnej czcionki (razy new roman lub coś podobnego to).