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

Question

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é cette caractéristique d'être mentionné dans ce WebKit/Safari 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, cet article de blog (en date 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.

Answer 1

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

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');

• window.getComputedStyle
• document.querySelector

Answer 2

Comme 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:

Vous pouvez les utiliser comme vous le feriez pour un élément, mais si vous retirez de l' 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 visibles et que vous ne pouvez pas modifier le code CSS du contenu à partir des éléments du panneau.

Answer 3

Chrome ne montrera pas: avant et: après les pseudo-éléments de l'arborescence DOM, s'ils manquent l'attribut "content". Il devrait être réglé, même s'il est réglé 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.

Answer 4

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