How do I add / insert a before or after pseudo element into Chrome's Inspector?

Andrew Tibbetts picture Andrew Tibbetts · Feb 25, 2014 · Viewed 39.9k times · Source

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?

Answer

radtek picture radtek · Nov 3, 2014

This is the easiest way and the way I do it:

  1. Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".

  2. 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.

    enter image description here

  3. Next, you will be able to edit the selector so add ::before / ::after to it:

    enter image description here

  4. Now edit the content to whatever you like, i.e.

Like so:

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

That's all there is to it :)