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

Question

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

Answer 1

Open the stylesheet you want in the inspector by holding Ctrl and clicking on a style property from that stylesheet (on Windows, click here for Mac). Then you can add whatever you want and it updates in realtime.

For example:

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

This will add the word 'TEST' as a prefix to any

tags it finds. Check it out on MDN

You can even save the stylesheet so you don't have to do it twice. Right-click inside the stylesheet and hit 'Save as'.