Wie kann ich Folgendes überprüfen und optimieren: vor und nach Pseudoelementen im Browser?

Ich habe einige ziemlich ausgefeilte DOM-Elemente mit einem: after-Pseudoelement erstellt und möchte sie entweder in Chrome Inspector oder Firebug oder einem gleichwertigen Element überprüfen und optimieren können.

Obwohl diese Funktion in diesem WebKit / Safari-Blogbeitrag (vom 2010) erwähnt wird, kann ich diese Funktion weder in Chrome noch in Safari finden. Chrome verfügt zumindest über Kontrollkästchen, die überprüft werden müssen: Schwebeflug ,: Besuchte und: Aktive Zustände, aber: Vorher und: Nachher sind nirgends zu sehen.

Darüber hinaus wird in diesem Blog-Beitrag (vom 2009!) Erwähnt, dass diese Funktion in den IE-Entwicklertools vorhanden ist, ich jedoch derzeit Mac OS verwende. Dies ist also keine Hilfe für mich. Außerdem ist IE kein Browser, auf den ich hauptsächlich abziele.

Gibt es eine Möglichkeit, diese Pseudoelemente zu untersuchen?

BEARBEITEN: Zusätzlich dazu, dass Firebug nicht in der Lage ist, diese Elemente zu überprüfen, habe ich festgestellt, dass Opera ziemlich gut darin ist, Elemente vor und nach dem Auspacken zu überprüfen.

In den Dev-Tools von Chrome werden die Stile eines Pseudoelements im Bedienfeld angezeigt:

Andernfalls können Sie auch die folgende Zeile in die JavaScript-Konsole eingeben und das zurückgegebene CSSStyleDeclarationObjekt überprüfen :

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

• window.getComputedStyle
• document.querySelector

Ab Chrome 31 werden Pseudoelemente im Elementfenster als untergeordnete Elemente ihres übergeordneten Elements angezeigt, wie in der folgenden Abbildung dargestellt:

Sie können sie wie ein normales Element auswählen. Wenn Sie jedoch den contentStil entfernen, wird auch das Pseudoelement entfernt und der Fokus von devtools wird auf das übergeordnete Element geändert.

Es scheint, dass geerbte CSS-Stile nicht angezeigt werden können und Sie CSS-Inhalte nicht im Elementfenster bearbeiten können.

Chrome zeigt nicht: vor und: nach Pseudoelementen im DOM-Baum, wenn sie das Attribut "content" vermissen. Es sollte gesetzt sein, auch wenn es auf nichts gesetzt ist.

Dies wird nicht angezeigt:

:after {
  background-color: red;
}

Dies wird im Inspektor angezeigt:

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

Ich hoffe es hilft.

Nach vieler Frustration, habe ich herausgefunden, dass Firefox nicht die Pseudo-Elemente im Dokumentbaum nicht zeigen überhaupt , aber wenn Sie das wählen genaues Element , das Pseudo-Element (e) definierte, dann die Stile für sein Pseudo-Element (e ) werden im Abschnitt Stilregeln auf der rechten Seite angezeigt. Dies gilt sowohl für den Firebug als auch für die eingebaute Inspektion ("Q"), und ich bin schockiert, dass sich niemand die Mühe gemacht hat, dies zuvor klar zu erklären.

Die Handhabung von Pseudoelementen durch Chrom / Chrom ist eindeutig überlegen, da sie (sowohl im Dokumentbaum als auch direkt auf der Seite) ausgewählt und wie normale Elemente überprüft werden können, mit Layout, Eigenschaften und allem anderen, unabhängig von ihrem "Eigentümer" ".

Derzeit verwendete Browserversionen: Chromium 40.0.2214.91, Firefox 31.3.0.

Firefox hat diese Funktion bereits seit einiger Zeit. Klicken Sie einfach mit der rechten Maustaste auf "Element überprüfen" und sehen Sie die Vorher- und Nachher-Elemente im rechten Bereich des Inspektors.

Element auswählen -> Schwebeflug aktiviert auswählen ---> Sie können :: vor und nach Elementen sehen