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

selector padre css

Question

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 su equivalente.

A pesar de que esta función se menciona en esta publicación de blog de WebKit / Safari (fechada en 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, esta entrada 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 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 sobre 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

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

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

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

Answer 2

Chrome no mostrará: before y: after pseudo elements en DOM-tree, si omite el atributo "content". Debe establecerse, incluso si está configurado en nada.

Esto no aparecerá:

:after {
background-color: red;
}

Esto aparecerá en el inspector:

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

Espero eso ayude.

Answer 3

Después de mucha frustración, me di cuenta de que Firefox no muestra los pseudo elementos en el árbol de documentos en absoluto , pero si selecciona el elemento exacto que tiene pseudo elemento (s) definido, entonces los estilos para su 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 pueden seleccionarse (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, independientemente de su "propietario" ".

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

Answer 4

En las herramientas Dev de Chrome , los estilos de un pseudo-elemento son visibles en el panel:

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

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

• window.getComputedStyle
• document.querySelector

Answer 5

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.