web-dev-qa-db-fra.com

Comment ajouter / insérer un pseudo-élément avant ou après dans l'inspecteur de Chrome?

Je peux ajouter une règle de style standard via le signe + (New Style Rule) mais je ne peux pas en ajouter une dans les sections "Pseudo :: before Element" ou "Pseudo :: after Element" de l'inspecteur de style. Si j'essaye d'ajouter le ::before ou ::after élément dans le HTML via "Modifier en HTML", il sort sous forme de texte. Ma solution consiste à ajouter <span class="pseudo_before"></span> puis stylisez ça. Suis-je en train de manquer quelque chose?

cssgoogle-chromepseudo-elementinspector
50
Andrew Tibbetts

C'est la façon la plus simple et la façon dont je le fais:

  1. Inspectez l'élément auquel vous souhaitez ajouter le :: avant ou :: après en cliquant dessus avec le bouton droit et en allant dans "Inspecter l'élément".

  2. Maintenant, dans la Developer Tools Console, cliquez sur l'icône du signe plus, aka. "Règle de nouveau style". Voir l'image ci-dessous, le signe plus est à côté du bouton "Basculer l'état de l'élément".

    enter image description here

  3. Ensuite, vous pourrez éditer le sélecteur alors ajoutez-y :: before/:: after:

    enter image description here

  4. Modifiez maintenant le contenu à votre guise, c'est-à-dire.

Ainsi:

.grp-row::before {       
   content: '> '; 
}

C'est tout ce qu'on peut en dire :)

82
radtek

Ouvrez la feuille de style souhaitée dans l'inspecteur en maintenant la touche Ctrl enfoncée et en cliquant sur une propriété de style de cette feuille de style (sous Windows, cliquez ici pour Mac ). Ensuite, vous pouvez ajouter tout ce que vous voulez et il se met à jour en temps réel.

Par exemple:

p::before {
    content:'TEST';
}

Cela ajoutera le mot "TEST" comme préfixe à tout <p> balises qu'il trouve. Vérifiez-le sur MDN

Vous pouvez même enregistrer la feuille de style pour ne pas avoir à le faire deux fois. Faites un clic droit à l'intérieur de la feuille de style et appuyez sur "Enregistrer sous".

2
Timmah