¿Cómo puedo inspeccionar y modificar: antes y después de los pseudo-elementos en el navegador?

Question

He creado algunos elementos DOM bastante elaborados con un: después del pseudo-elemento, y me gustaría poder inspeccionarlos y modificarlos en Chrome Inspector o Firebug o su equivalente.

A pesar de que esta característica se menciona en this WebKit/Safari blog post (con fecha de 2010), no puedo encontrar esta característica en Chrome ni en Safari. Chrome tiene al menos casillas de verificación para inspeccionar: hover,: visited y: estados activos, pero: before y: after no están visibles.

Además, this blog post (con fecha de 2009!) Menciona que esta capacidad existe en las herramientas de desarrollo IE, pero actualmente estoy usando Mac OS, por lo que esto no es de ninguna ayuda para mí. Además, IE no es un navegador al que me dirijo principalmente.

¿Hay alguna forma de inspeccionar estos pseudo-elementos?

EDITAR: Además de estar equivocado acerca de que Firebug no puede inspeccionar estos elementos, he encontrado que Opera es bastante bueno en Inspección: antes y después de los elementos de fábrica.

Answer 1

En Chrome's Dev tools, los estilos de un pseudo-elemento son visibles en el panel:

De lo contrario, también puede introducir la siguiente línea en la consola JavaScript, e inspeccionar el CSSStyleDeclaration objeto devuelto:

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

• window.getComputedStyle
• document.querySelector

Answer 2

A partir de Chrome 31 pseudo elementos muestran en el panel de elementos como elementos secundarios de sus padres como se muestra en la siguiente imagen:

puede seleccionarlos como lo haría un normales elemento pero si elimina el estilo content, el pseudo elemento también se eliminará y el foco de devtools cambiará a su elemento primario.

Parece que los estilos CSS heredados son no visibles y no se puede editar el contenido CSS desde el panel de elementos.

Answer 3

Firefox ha tenido esta característica por un tiempo ahora, simplemente haga clic derecho, "inspeccionar elemento", y ver los elementos antes y después en el panel derecho del inspector.

Answer 4

Chrome no se mostrará: antes y después de los pseudo elementos en el árbol DOM, si pierden el atributo "contenido". Debe establecerse, incluso si está configurado en nada.

Esto no se mostrará:

:after { 
    background-color: red; 
} 

mismo se mostrará en el inspector:

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

espero que ayude.

Answer 5

Después de una gran cantidad de frustración, me di cuenta de que Firefox no muestra los pseudo elementos en la estructura del documento en absoluto, pero si se selecciona el elemento exacta que tiene elemento (s) de pseudo definido, a continuación, los estilos para sus pseudo elemento (s) se muestran en la sección de reglas de estilo en el lado derecho. Esto es cierto tanto para firebug como para la inspección incorporada ("Q"), y estoy sorprendido de que nadie se haya molestado en explicar esto claramente antes.

Claramente, el manejo de pseudo elementos de cromo/cromo es enormemente superior, ya que se pueden seleccionar (tanto en el árbol de documentos como directamente en la página) e inspeccionarse como elementos regulares, con diseño, propiedades y todo lo demás, independiente de su "dueño".

Versiones de navegador que estoy usando actualmente: Chromium 40.0.2214.91, Firefox 31.3.0.