Menu
I can add a regular style rule via the + sign (New Style Rule) but I can't add one under the "Pseudo ::before Element" or "Pseudo ::after Element" sections of the Style Inspector. If I try to add the ::before or ::after element into the HTML via "Edit as HTML", it comes out as text. My workaround is to add <span class="pseudo_before"></span> and then style that. Am I missing something?
964
::before is a generated content element that represents a styleable abstract first child of the respective element. The content inserted using ::before is inserted before other content inside the element and is displayed inline by default. The value of the content is specified using the content property.
The ::before pseudo-element can be used to insert some content before the content of an element.
Right-click an element in the inspector, and select "Edit as HTML". You can then add whatever HTML you want inside of it. Warning: this will destroy the element with all its descendants, and will then recreate them once you're done editing the HTML.
Pseudo classes on elements can be triggered to investigate how an element may react if it were to be hovered over for example. You can right click on a node in the Elements panel and select Force element state. Alternatively, the Toggle element state icon can be clicked on in the Styles sub-pane.
This is the easiest way and the way I do it:
Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".
Now in the Developer Tools Console, click on the plus sign icon aka. "New Style Rule". See the image below, the plus sign is next to the "Toggle Element State" button.
Next, you will be able to edit the selector so add ::before / ::after to it:
Now edit the content to whatever you like, i.e.
Like so:
.grp-row::before { content: '> '; } That's all there is to it :)
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
