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 régulière via le signe + (nouvelle règle de Style) Mais je ne peux pas en ajouter une sous les sections" Pseudo ::before Element "ou" Pseudo ::after Element " de L'inspecteur de Style. Si j'essaie d'ajouter l'élément ::before ou ::after dans le HTML via "Edit as HTML", il sort sous forme de texte. Mon contournement est d'ajouter <span class="pseudo_before"></span> et puis le style que. Ai-je raté quelque chose?

34
demandé sur Andrew Tibbetts 2014-02-25 23:15:20

2 réponses

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

  1. "Inspectez L'élément que vous voulez ajouter le ::avant ou ::après en cliquant avec le bouton droit de la souris et en allant sur "Inspecter L'élément".

  2. maintenant dans la Console Developer Tools, cliquez sur l'icône plus sign aka. "Nouvelle Règle De Style". Voir l'image ci-dessous, le signe plus est à côté du bouton "Toggle Element State".

    enter image description here

  3. Ensuite, vous serez en mesure de modifier le sélecteur afin d'ajouter ::avant / ::après:

    enter image description here

  4. éditez maintenant le contenu à tout ce que vous voulez, i.e.

Comme suit: 

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

C'est tout là est à lui :)

62
répondu radtek 2014-11-03 16:59:34

ouvrez la feuille de style que vous voulez dans l'inspecteur en tenant Ctrl et en cliquant sur une propriété de style de cette feuille de style (sur Windows, Cliquez ici pour Mac ). Ensuite, vous pouvez ajouter ce que vous voulez et il met à jour en temps réel.

par exemple: 

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

ceci ajoutera le mot" TEST "comme préfixe à n'importe quelle étiquette <p> qu'il trouve. regardez sur MDN

vous pouvez même sauvegardez 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 cliquez sur "Enregistrer sous".

1
répondu Timmah 2017-05-23 12:02:14