Wie füge ich ein Vorher- oder Nachher-Pseudoelement in den Inspector von Chrome ein?

Question

Ich kann eine reguläre Stilregel über das + -Zeichen hinzufügen (Neue Stilregel), aber ich kann keine unter den Abschnitten "Pseudo :: vor Element" oder "Pseudo :: nach Element" des Stilinspektors hinzufügen. Wenn ich versuche, das Element ::before oder ::after über "Edit as HTML" in den HTML-Code einzufügen, erscheint es als Text. Meine Problemumgehung besteht darin, <span class="pseudo_before"></span> hinzuzufügen und dann zu formatieren. Fehle ich etwas?

Answer 1

Dies ist der einfachste Weg, und die Art, wie ich es tun:

1. Überprüfen Sie das Element, das Sie das hinzufügen möchten :: vor oder :: nach dem rechten Mausklick und gehen auf „Inspect Element“ .

2. Klicken Sie jetzt in der Developer Tools-Konsole auf das Pluszeichen-Symbol aka. "Neue Stilregel" Sehen Sie sich das Bild unten an, das Pluszeichen befindet sich neben der Schaltfläche "Elementstatus umschalten".

   

3. Als nächstes können Sie den Wähler so bearbeiten, hinzufügen :: before/:: nach ihm:

   

4. bearbeiten Sie nun den Inhalt, was auch immer Sie mögen , dh

Wie so:

.grp-row::before {  
    content: '> '; 
} 

Das ist alles dort ist zu ihm :)

Answer 2

Öffnen Sie das gewünschte Stylesheet im Inspektor, indem Sie die Strg-Taste gedrückt halten und auf eine Stileigenschaft dieses Stylesheets klicken (unter Windows, click here for Mac). Dann können Sie hinzufügen, was Sie wollen und es wird in Echtzeit aktualisiert.

Zum Beispiel:

p::before { 
    content:'TEST'; 
} 

Dies wird das Wort 'TEST' als Präfix für jegliche <p> Tags findet es hinzuzufügen. Check it out on MDN

Sie können sogar das Stylesheet speichern, damit Sie es nicht zweimal machen müssen. Klicken Sie mit der rechten Maustaste in das Stylesheet und klicken Sie auf "Speichern unter".