Puis-je avoir plusieurs pseudo-éléments :before pour le même élément ?

Question

Est-il possible d'avoir plusieurs :before pseudos pour le même élément ?

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

J'essaie d'appliquer les styles ci-dessus au même élément en utilisant jQuery, mais seul le plus récent est appliqué, jamais les deux.

Answer 1

En CSS2.1, un élément ne peut avoir qu'un seul pseudo-élément à la fois, quel que soit son type. (Cela signifie qu'un élément peut avoir à la fois un :before et un :after pseudo-élément - il ne peut simplement pas avoir plus d'un de chaque type).

Par conséquent, lorsque vous avez plusieurs :before correspondant au même élément, elles s'appliqueront toutes en cascade à une seule et unique :before pseudo-élément, comme avec un élément normal. Dans votre exemple, le résultat final ressemble à ceci :

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

Comme vous pouvez le voir, seul le content La déclaration qui a la plus haute priorité (comme mentionné, celle qui vient en dernier) prendra effet - les autres déclarations sont écartées, comme c'est le cas avec toute autre propriété CSS.

Ce comportement est décrit dans le Section Sélecteurs de CSS2.1 :

Les pseudo-éléments se comportent comme les éléments réels en CSS, à l'exception des cas décrits ci-dessous et des cas suivants ailleurs.

Cela implique que les sélecteurs avec des pseudo-éléments fonctionnent comme des sélecteurs pour des éléments normaux. Cela signifie également que la cascade devrait fonctionner de la même manière. Étrangement, CSS2.1 semble être la seule référence ; ni css3-sélecteurs ni css3-cascade ne mentionne pas du tout ce point, et il reste à voir si cela sera clarifié dans une future spécification.

Si un élément peut correspondre à plus d'un sélecteur avec le même pseudo-élément, et que vous voulez que tous s'appliquent d'une manière ou d'une autre, vous devrez créer des règles CSS supplémentaires avec des sélecteurs combinés afin de pouvoir spécifier exactement ce que le navigateur doit faire dans ces cas. Je ne peux pas fournir d'exemple complet incluant la règle content ici, car il n'est pas clair, par exemple, si le symbole ou le texte doit venir en premier. Mais le sélecteur dont vous avez besoin pour cette règle combinée est soit .circle.now:before o .now.circle:before - Quel que soit le sélecteur que vous choisissez, c'est une préférence personnelle, car les deux sélecteurs sont équivalents, seule la valeur de la balise content propriété que vous devrez définir vous-même.

Si vous avez encore besoin d'un exemple concret, consultez ma réponse à la question suivante cette question similaire .

L'ancienne spécification css3-content contient une section sur l'insertion de multiples ::before y ::after pseudo-éléments en utilisant une notation compatible avec la cascade CSS2.1, mais notez que ce document particulier est obsolète - il n'a pas été mis à jour depuis 2003, et personne n'a mis en œuvre cette fonctionnalité au cours de la dernière décennie. La bonne nouvelle est que le document abandonné fait l'objet d'une réécriture active sous la forme de css-content-3 y css-pseudo-4 . La mauvaise nouvelle est que la fonctionnalité de pseudo-éléments multiples n'apparaît nulle part dans l'une ou l'autre des spécifications, probablement en raison, une fois encore, d'un manque d'intérêt de la part des utilisateurs.

Answer 2

Si votre élément principal comporte des éléments enfants ou du texte, vous pouvez l'utiliser.

Positionnez votre élément principal de manière relative (ou absolue/fixe) et utilisez à la fois :before et :after positionnés de manière absolue (dans ma situation, il fallait que ce soit absolu, je ne sais pas pour la vôtre).

Maintenant, si vous voulez un pseudo-élément supplémentaire, attachez un :before absolu à l'un des enfants de l'élément principal (si vous n'avez que du texte, mettez-le dans un span, vous avez maintenant un élément), qui n'est pas relatif/absolu/fixe.

Cet élément va commencer à agir comme si son propriétaire était votre élément 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 */
}

Answer 3

J'ai résolu ce problème en utilisant :

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

En utilisant la famille de polices "font awesome 5 free" pour l'icône, et après, nous devons spécifier la police que nous utilisons à nouveau car si nous ne le faisons pas, le navigateur utilisera la police par défaut (times new roman ou quelque chose comme ça).

Answer 4

Vous pouvez également utiliser une image/icône et du texte dans le champ de contenu.

par exemple

p.album-title::after {
  content: url('https://...camera-icon-blue.png') ' View >';
  display: block;
  ...;
}

Answer 5

Selon ce Vous pouvez le faire dans certaines situations, mais il doit être appliqué après le dernier sélecteur simple.

Je devrais également mentionner que l'IE pourrait aussi faire une crise. Ce bon vieux IE.