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

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

A pesar de que esta característica se menciona en esta publicación de blog de WebKit / Safari (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,: visitado y: estados activos, pero: antes y: después no se ven por ninguna parte.

Además, esta publicación de blog (¡con fecha de 2009!) Menciona que esta capacidad existe en las herramientas de desarrollo de IE, pero actualmente estoy usando Mac OS, por lo que esto no me ayuda. 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, descubrí que Opera es bastante bueno en la inspección: antes y después de los elementos listos para usar.

En las herramientas de desarrollo de Chrome , los estilos de un pseudoelemento son visibles en el panel:

De lo contrario, también puede ingresar la siguiente línea en la consola de JavaScript e inspeccionar el CSSStyleDeclarationobjeto devuelto :

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

• window.getComputedStyle
• document.querySelector

A partir de Chrome 31, los pseudo elementos se muestran en el panel de elementos como elementos secundarios de su padre, como se muestra en la siguiente imagen:

Puede seleccionarlos como lo haría con un elemento normal, pero si elimina el contentestilo, el pseudo elemento también se eliminará y el foco de devtools cambiará a su padre.

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

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

Esto no aparecerá:

:after {
  background-color: red;
}

Esto se mostrará en el inspector:

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

Espero eso ayude.

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 selecciona la exacta elemento que tiene pseudo elemento (s) definido, entonces los estilos para su elemento seudo (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 me sorprende que nadie se haya molestado en explicar esto claramente antes.

Claramente, el manejo de los pseudo elementos de chrome / chromium es muy superior, ya que pueden seleccionarse (tanto en el árbol del documento como directamente en la página) e inspeccionarse como elementos normales, con diseño, propiedades y todo lo demás, independientemente de su "propietario ".

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

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

Seleccionar elemento -> seleccionar desplazamiento marcado ---> puede ver :: elementos antes y después

Al menos desde Chrome 62, hay una configuración en DevTools para 'Mostrar el DOM sombra del agente de usuario' que muestra pseudoelementos adicionales como marcadores de posición de entrada , que de otra manera no aparecerían en el árbol DOM.

Más información: https://stackoverflow.com/a/26853319/3963594