En CSS2.1, un elemento solo puede tener como máximo uno de cualquier tipo de pseudoelemento en cualquier momento. (Esto significa que un elemento puede tener tanto un elemento :before
como un :after
pseudoelemento, simplemente no puede tener más de uno de cada tipo).
Como resultado, cuando tiene varias :before
reglas que coinciden con el mismo elemento, todas se aplicarán en cascada y se aplicarán a un solo :before
pseudoelemento, como con un elemento normal. En su ejemplo, el resultado final se ve así:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Como puede ver, solo la content
declaración que tiene la prioridad más alta (como se mencionó, la que viene en último lugar) entrará en vigencia; el resto de las declaraciones se descartan, como es el caso con cualquier otra propiedad CSS.
Este comportamiento se describe en la sección Selectores de CSS2.1 :
Los pseudoelementos se comportan como elementos reales en CSS con las excepciones que se describen a continuación y en otros lugares.
Esto implica que los selectores con pseudoelementos funcionan como selectores para elementos normales. También significa que la cascada debería funcionar de la misma manera. Curiosamente, CSS2.1 parece ser la única referencia; ni css3-selectors ni css3-cascade mencionan esto en absoluto, y queda por ver si se aclarará en una especificación futura.
Si un elemento puede hacer coincidir más de un selector con el mismo pseudoelemento y desea que todos se apliquen de alguna manera, deberá crear reglas CSS adicionales con selectores combinados para poder especificar exactamente lo que debe hacer el navegador en esos casos. No puedo proporcionar un ejemplo completo que incluya la content
propiedad aquí, ya que no está claro, por ejemplo, si el símbolo o el texto deben ir primero. Pero el selector que necesita para esta regla combinada es .circle.now:before
o .now.circle:before
- el selector que elija es preferencia personal, ya que ambos selectores son equivalentes, es solo el valor de la content
propiedad lo que deberá definir usted mismo.
Si aún necesita un ejemplo concreto, vea mi respuesta a esta pregunta similar .
La especificación de contenido css3 heredado contiene una sección sobre la inserción de elementos múltiples ::before
y ::after
pseudoelementos utilizando una notación que es compatible con la cascada CSS2.1, pero tenga en cuenta que ese documento en particular está obsoleto; no se ha actualizado desde 2003 y nadie lo ha hecho. implementó esa característica en la última década. La buena noticia es que el documento abandonado se está reescribiendo activamente bajo la apariencia de css-content-3 y css-pseudo-4 . La mala noticia es que la característica de múltiples pseudoelementos no se encuentra en ninguna de las dos especificaciones, presumiblemente debido, nuevamente, a la falta de interés del implementador.
circle
como a la clasenow
, ambas reglas se aplican al:before
pseudo-elemento del elemento, pero el CSS normal implica que solo una de lascontent
configuraciones puede tener efecto (por las reglas normales en cascada). El caso es quecontent
no se acumula.