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

selectores css

Question

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

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

Estoy intentando aplicar los estilos anteriores al mismo elemento usando jQuery, pero solo se aplica el más reciente, nunca los dos.

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 un pseudo-elemento a :before y an :after no puede tener más de uno de cada tipo).

Como resultado, cuando tiene varias :before reglas coincidan con el mismo elemento, todas se aplicarán en cascada y se aplicarán a una sola :before pseudo-elemento, como ocurre 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 declaración de content que tiene la más alta prioridad (como la mencionada, la última) tendrá efecto; el resto de las declaraciones se descartarán, como en el caso de cualquier otra propiedad de CSS.

Este comportamiento se describe en la sección Selectores de CSS2.1 :

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

Esto implica que los selectores con pseudo-elementos funcionan igual que los 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 en absoluto, y queda por ver si se aclarará en una futura especificación.

Si un elemento puede hacer coincidir 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é debe hacer el navegador en esos casos. No puedo proporcionar un ejemplo completo que incluya la propiedad del 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 .now.circle:before : cualquiera que sea el selector que elija es preferencia personal, ya que ambos selectores son equivalentes, es solo el valor de la propiedad de content que necesitará para definirte a ti mismo

Si aún necesita un ejemplo concreto, vea mi respuesta a esta pregunta similar .

La especificación legacy css3-content contiene una sección sobre la inserción de múltiples ::before y ::after pseudo-elementos usando una notación que es 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 ha implementado 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 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.

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

Ahora, si quieres un pseudo-elemento más, adjunta un absoluto: antes a uno de los elementos secundarios del elemento principal (si solo tienes texto, ponlo en un lapso, ahora tienes un elemento), que no es relativo / absoluto / fijo .

Este elemento comenzará a actuar como si su dueño fuera tu 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 */
}