Comment puis-je inspecter et modifier: avant et: après les pseudo-éléments dans le navigateur?

J'ai créé des éléments DOM assez élaborés avec un pseudo-élément: after, et j'aimerais pouvoir les inspecter et les modifier dans Chrome Inspector ou Firebug ou équivalent.

Bien que cette fonctionnalité soit mentionnée dans cet article de blog WebKit / Safari (daté de 2010), je ne trouve pas du tout cette fonctionnalité dans Chrome ou Safari. Chrome a au moins des cases à cocher pour inspecter: hover,: viewed et: active states, mais: before et: after ne sont nulle part.

De plus, ce billet de blog (daté de 2009!) Mentionne que cette fonctionnalité existe dans les outils de développement IE, mais j'utilise actuellement Mac OS, donc cela ne m'aide pas. De plus, IE n'est pas un navigateur que je cible principalement.

Existe-t-il un moyen d'inspecter ces pseudo-éléments?

EDIT: En plus de me tromper sur l'incapacité de Firebug à inspecter ces éléments, j'ai trouvé qu'Opera était assez bon pour inspecter: avant et: après les éléments hors de la boîte.

Dans les outils de développement de Chrome , les styles d'un pseudo-élément sont visibles dans le panneau:

Sinon, vous pouvez également saisir la ligne suivante dans la console JavaScript et inspecter l' CSSStyleDeclarationobjet retourné :

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

À partir de Chrome, les pseudo éléments 31 s'affichent dans le panneau des éléments en tant qu'éléments enfants de leur parent, comme illustré dans l'image suivante:

Vous pouvez les sélectionner comme vous le feriez pour un élément normal, mais si vous supprimez le contentstyle, le pseudo-élément sera également supprimé et le focus devtools deviendra son parent.

Il semble que les styles CSS hérités ne soient pas visibles et vous ne pouvez pas modifier le contenu CSS à partir du panneau des éléments.

Chrome n'affichera pas: avant et: après les pseudo éléments dans l'arborescence DOM, s'ils manquent l'attribut "content". Il doit être défini, même s'il est défini sur rien.

Cela n'apparaîtra pas:

:after {
  background-color: red;
}

Cela apparaîtra dans l'inspecteur:

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

J'espère que ça aide.

Après beaucoup de frustration, je me suis dit que Firefox ne montre pas les éléments pseudo dans l'arborescence des documents du tout , mais si vous sélectionnez l' exacte élément qui a élément pseudo (s) défini, puis les styles pour son élément pseudo (s ) sont affichés dans la section des règles de style sur le côté droit. Ceci est vrai à la fois pour Firebug et pour l'inspection intégrée ("Q"), et je suis choqué que personne ne se soit donné la peine de l'expliquer clairement avant.

De toute évidence, la gestion des pseudo éléments par chrome / chrome est nettement supérieure, 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 normaux, avec mise en page, propriétés et tout le reste, indépendamment de leur "propriétaire ".

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

Firefox a cette fonctionnalité depuis un certain temps maintenant, il suffit de cliquer avec le bouton droit de la souris, "inspecter l'élément" et de voir les éléments avant et après dans le panneau de droite de l'inspecteur.

Sélectionnez l'élément -> sélectionnez le survol vérifié ---> vous pouvez voir :: les éléments avant et après

Au moins depuis Chrome 62, il existe un paramètre dans DevTools pour `` Afficher le DOM de l'ombre de l'agent utilisateur '' qui affiche des pseudo-éléments supplémentaires tels que des espaces réservés d'entrée , qui n'apparaîtraient pas dans l'arborescence DOM autrement.

Plus d'informations: https://stackoverflow.com/a/26853319/3963594