Comment puis-je inspecter et modifier :before et :after pseudo-éléments dans le navigateur?

J'ai créé assez d'élaborer des éléments du DOM avec un :après le pseudo-élément, et je voudrais être en mesure d'inspecter et de les adapter dans google Chrome Inspecteur ou Firebug ou l'équivalent.

Malgré cela étant mentionné dans cette WebKit/Safari post de blog (datant de 2010), je ne trouve pas cette fonctionnalité dans google Chrome ou Safari. Chrome permet au moins d'avoir des cases à cocher pour inspecter :hover, :visited et :active les états, mais :before et :after sont nulle part pour être vu.

En outre, ce blog (datée de 2009!) mentionne cette capacité existe, en plus de la barre d'outils de dev, mais je suis actuellement sous Mac OS, si ce n'est d'aucune aide pour moi. En outre, IE n'est pas un navigateur, je suis à l'origine de ciblage.

Est-il un moyen de contrôle de ces pseudo-éléments?

EDIT: En plus d'être mauvais sur Firebug étant pas en mesure d'inspecter ces éléments, j'ai trouvé de l'Opéra à être assez bon à l'Inspection :before et :after éléments de la boîte.

  • avec firebug, vous pouvez inspecter le style de ces pseudoelements.
  • comment? Est-il de mise à jour de la page si je les modifier?
  • oui, je suis en mesure de modifier les propriétés de pseudoelements via firebug 1.9.1 sur Fx11/MacOS
  • Ah oui, je le vois trop. Toutes mes excuses, je pêchait Firefox nouveau, intégré les outils de dev (dont l'Id n'est pas utilisée avant) pour un certain type de Firebug refonte avec inexplicablement moins de fonctionnalités. Je suis corrigé 😉
  • Cochez cette réponse pour tester pseudoelements dans chrome et firefox stackoverflow.com/a/20716179/1868660
  • Firefox devtools ne montrer avant et après les styles.
  • vous êtes tout à fait tort, les états stationnaire n'ont rien à voir avec les pseudo-éléments!
  • stackoverflow.com/a/31777685/3597276

InformationsquelleAutor majackson | 2012-04-16
  1. 56

    Dans Chrome Dev tools, les styles d'une pseudo-élément sont visibles dans le panneau:

    Comment puis-je inspecter et modifier :before et :after pseudo-éléments dans le navigateur?

    Sinon, vous pouvez aussi saisir la ligne suivante dans la console JavaScript, et d'inspecter le retour de l' CSSStyleDeclaration objet:

    getComputedStyle(document.querySelector('html > body'), ':before');
    • Je ne la vois pas. Quels éléments êtes-vous d'inspecter afin de voir s'affichent dans le panneau? Aussi, quelle version de Chrome utilisez-vous?
    • Chrome 18.0 Ubuntu 11.10. Inspecter le x dans cette démo: jsfiddle.net/2M6JA
    • Je vois le pseudoclasses dans votre démo, mais pas dans mon code, ce qui fait de moi pense que je vais avoir un autre, le problème est différent. Dans tous les cas, il est évident que vous êtes correct donc je vais marquer cette résolu - merci beaucoup!
    • Il y a de soudures :pseudo styles ne peuvent pas être inspectés dans certains cas. Découvrez cette fourche de @Rob W violon : jsfiddle.net/RQsY6 => le pseudo-élément sur une étiquette ne peut pas être inspecté.
    • Au moins dans Chrome 23, je vois div::before avec content: 'x'; - capture d'écran: i.stack.imgur.com/nQ2TZ.png. EDIT: Nos violons ne diffèrent pas du tout. Ne voulez-vous remplacer div avec a? Encore, le pseudo-élément peut encore être inspecté: jsfiddle.net/RQsY6/1 (il suffit de sélectionner la balise d'ancrage dans l'arborescence DOM).
    • Désolé @Rob W, je dois avoir oublié de le mettre à jour. Voici le nouveau: jsfiddle.net/RQsY6/2. Je pense que, lorsque la règle css est trop complexe, il ne fonctionne pas (ici : la section p.test1.test2 un:avant de). Quand j'ai simplifier la règle (par la suppression d'une classe), je peux inspecter le pseudo-élément.

    InformationsquelleAutor Rob W
  2. 29

    De Chrome 31 pseudo éléments à afficher dans le panneau eléments, que les éléments enfants de leurs parents comme le montre l'image suivante:

    Comment puis-je inspecter et modifier :before et :after pseudo-éléments dans le navigateur?

    Vous pouvez les utiliser comme vous le feriez pour un élément, mais si vous supprimez le content style puis le pseudo élément sera également supprimé et les devtools l'accent qui va changer à celle du parent.

    Il semble que les hérité de styles CSS sont pas visible et vous ne pouvez pas modifier le code CSS du contenu à partir des éléments du panneau.

    • DUH!! Merci 🙂
    InformationsquelleAutor A.M.K
  3. 20

    Chrome de ne pas s'afficher :before et :after pseudo-éléments dans l'arborescence DOM, s'ils ratent attribut "content". Il devrait être mis, même si il est rien.

    N'apparaît pas:

    :after {
  background-color: red;
}

    Cela apparaîtra dans l'inspecteur:

    :after {
  content: "";   
  background-color: red;    
}

    Espère que cela aide.

    InformationsquelleAutor pop
  4. 5

    Après beaucoup de frustration, j'ai compris que firefox n'affiche pas le pseudo des éléments dans l'arborescence du document à tous les, mais si vous sélectionnez le exacte élément qui a le pseudo élément(s) défini, puis les styles pour sa pseudo-élément(s) sont indiquées dans les règles de style dans la partie droite. Cela est vrai pour les deux firebug et le haut-inspecter ("Q"), et je suis choqué que personne n'a pris la peine d'expliquer clairement avant.

    Clairement, chrome/chromium est la manipulation des éléments pseudo est largement supérieur, car ils peuvent être sélectionnés (à la fois dans l'arborescence du document et directement sur la page) et inspectés comme des éléments, avec la mise en page, les propriétés et tout le reste, indépendamment de leur "propriétaire".

    Versions de navigateur que j'utilise actuellement: Chrome 40.0.2214.91, Firefox 31.3.0.

    InformationsquelleAutor aditsu
  5. 1

    Firefox a eu cette fonction pour un certain temps maintenant, il suffit de faire un clic droit, "inspecter l'élément", et de voir l'avant et l'après des éléments dans le panneau de droite de l'inspecteur.

    • Je ne vois pas le :after et :before éléments pseudo dans "indigènes", inspecteur de l'outil de basculement de la pseudo-éléments me donne hover, active et focus seulement. Je peux les voir dans Firebug si.
    • Parlez-vous de la bascule sur le menu du clic droit? Parce que :before et :after ne sont pas quelque chose que vous mettez là-bas, ils devraient toujours apparaître dans le css de l'inspecteur.
    InformationsquelleAutor NoBugs