web-dev-qa-db-fra.com

Ajout d'une classe CSS sur un pseudo-élément

Je me demandais s'il y avait un moyen d'ajouter une classe CSS aux pseudo-éléments, tels que: after.

Je veux utiliser: après pour ajouter un message d'erreur. Je veux également que le message d'erreur ait le même style que les autres messages d'erreur.

Cela marche:

.error:after {
  content: "Error Message";
  color: red;
}

Mais puis-je faire quelque chose comme ça pour ajouter plus que le style des couleurs?:

.error:after {
  content: "Error Message";
  class: error_message_styles;
}

De plus, y a-t-il une différence entre l'utilisation de ":: after" vs ": after"?

Merci d'avance!

csspseudo-element
22
Zhao Li

Il n'y a aucun moyen de donner un attribut HTML de quelque sorte que ce soit à un élément psuedo.

Utilisez simplement le sélecteur deux fois:

.error:after {
  content: "Error Message";
}
.error:after, .error-style {
  color:red;
}

De plus, y a-t-il une différence entre l'utilisation de ":: after" vs ": after"?

Selon ce:

https://developer.mozilla.org/en/CSS/:after

Le ::after la notation a été introduite dans CSS 3 afin d'établir une discrimination entre les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent également la notation :after introduit dans CSS 2.

Remarque: Microsoft Internet Explorer 8 prend en charge la notation: après uniquement.

Je dirais que les messages d'erreur peuvent être du contenu, pas de la décoration - mais c'est votre appel.

18
Wesley Murch

L'élément :after N'est pas un élément DOM physique, il ne peut donc pas prendre une classe.

Si vous utilisez une bibliothèque de feuilles de style comme LESS , vous pouvez mélanger les styles d'autres classes en incluant la classe en tant que propriété:

.error {
    .error-styles;
}
3
JoeJ