¿Puedo tener múltiples: antes de pseudo-elementos para el mismo elemento?

Question

¿Es posible tener múltiples pseudos :before para el mismo elemento?

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

estoy tratando de aplicar los estilos anteriores para el mismo elemento usando jQuery, pero sólo se aplica la más reciente, nunca ambos de ellos.

Answer 1

En CSS2.1, un elemento solo puede tener como máximo uno de cualquier tipo de pseudo-elemento en cualquier momento. (Esto significa que un elemento puede tener tanto un un pseudo-elemento :before y :after -. Simplemente no puede tener más de uno de cada clase)

Como resultado, cuando se tienen varios :before reglas que coinciden con el mismo elemento, lo harán todos en cascada y se aplican a un solo pseudo-elemento :before, como con un elemento normal. En su ejemplo, el resultado final es el siguiente:

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

Como se puede ver, sólo la declaración content que tiene precedencia más alta (como se ha mencionado, el que viene al final) se llevará a efecto - el resto de las declaraciones se descartan, como es el caso con cualquier otra propiedad de CSS.

Este comportamiento se describe en el Selectors section of CSS2.1:

pseudo-elementos se comportan igual que los elementos reales en CSS con las excepciones que se describen a continuación y elsewhere.

Esto implica que los selectores con los pseudo-elementos 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 futura especificación.

Si un elemento puede coincidir con más de un selector con el mismo pseudo-elemento, y desea que todos se apliquen de alguna manera, tendrá que crear reglas CSS adicionales con selectores combinados para que pueda especificar exactamente qué navegador debería hacer en esos casos. No puedo proporcionar un ejemplo completo que incluya la propiedad content aquí, ya que no está claro, por ejemplo, si el símbolo o el texto deben aparecer 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 propiedad content que deberá definir usted mismo.

Si aún necesita un ejemplo concreto, consulte mi respuesta al this similar question.

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements utilizando una notación que sea compatible con la cascada de CSS2.1, pero tenga en cuenta que ese documento en particular está obsoleto: no se ha actualizado desde 2003 y nadie lo ha implementado 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 pseudo-elementos no se encuentra en ninguna de las especificaciones, presumiblemente debido, de nuevo, a la falta de interés de los implementadores.

Answer 2

Si su elemento principal tiene elementos secundarios o texto, puede usarlo.

Coloque su elemento principal relativo (o absoluto/fijo) y use ambos: antes y después de la posición absoluta (en mi situación tenía que ser absoluta, no sé acerca de la suya).

Ahora, si desea un pseudo-elemento más, adjunte un absoluto: antes a uno de los elementos del elemento principal (si solo tiene texto, póngalo en un tramo, ahora tiene un elemento), que no es relativo/absoluto/fijo.

Este elemento comenzará a actuar como si su propietario fuera su elemento principal.

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