No CSS2.1, um elemento só pode ter no máximo um de qualquer tipo de pseudoelemento a qualquer momento. (Isso significa que um elemento pode ter um :before
e um :after
pseudo-elemento - ele simplesmente não pode ter mais de um de cada tipo.)
Como resultado, quando você tem várias :before
regras correspondendo ao mesmo elemento, todas elas se propagam em cascata e se aplicam a um único :before
pseudoelemento, como acontece com um elemento normal. Em seu exemplo, o resultado final se parece com este:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Como você pode ver, apenas a content
declaração que tem a precedência mais alta (como mencionado, a que vem por último) terá efeito - o resto das declarações são descartadas, como é o caso com qualquer outra propriedade CSS.
Esse comportamento é descrito na seção Seletores do CSS2.1 :
Pseudo-elementos se comportam como elementos reais em CSS, com as exceções descritas abaixo e em outros lugares.
Isso implica que os seletores com pseudoelementos funcionam da mesma forma que os seletores para elementos normais. Isso também significa que a cascata deve funcionar da mesma maneira. Estranhamente, CSS2.1 parece ser a única referência; nem css3-selectors nem css3-cascade mencionam isso de forma alguma, e resta saber se isso será esclarecido em uma especificação futura.
Se um elemento pode corresponder a mais de um seletor com o mesmo pseudo-elemento, e você deseja que todos eles se apliquem de alguma forma, você precisará criar regras CSS adicionais com seletores combinados para que possa especificar exatamente o que o navegador deve fazer nesses casos. Não posso fornecer um exemplo completo incluindo a content
propriedade aqui, uma vez que não está claro, por exemplo, se o símbolo ou o texto deve vir primeiro. Mas o seletor de que você precisa para esta regra combinada é .circle.now:before
ou .now.circle:before
- o seletor que você escolher é a preferência pessoal, pois os dois seletores são equivalentes, é apenas o valor da content
propriedade que você precisa para definir você mesmo.
Se você ainda precisa de um exemplo concreto, veja minha resposta a esta pergunta semelhante .
A especificação do conteúdo css3 legado contém uma seção sobre a inserção de vários ::before
e ::after
pseudo-elementos usando uma notação compatível com a cascata CSS2.1, mas observe que esse documento específico está obsoleto - não foi atualizado desde 2003 e ninguém o fez implementou esse recurso na última década. A boa notícia é que o documento abandonado está sendo reescrito ativamente sob o disfarce de css-content-3 e css-pseudo-4 . A má notícia é que o recurso de múltiplos pseudoelementos não pode ser encontrado em nenhuma das especificações, provavelmente devido, novamente, à falta de interesse do implementador.
circle
e à classenow
, ambas as regras se aplicam ao:before
pseudoelemento do elemento, mas o CSS normal implica que apenas uma dascontent
configurações pode ter efeito (por regras normais em cascata). A questão é quecontent
não se acumula.