98

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?

Andrew Tibbetts
  • 2,874
  • 3
  • 23
  • 28
  • You can use the plus sign, then while the class or element is highlighted, add the pseudo element by editing the class or element name. Hitting the right arrow key will put you at the end. – brouxhaha Feb 25 '14 at 23:56
  • Is there a way to do this in Firebug? – Keyslinger Apr 09 '15 at 16:19

2 Answers2

144

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 :)

radtek
  • 34,210
  • 11
  • 144
  • 111
  • What if your element doesn't have a class? Chrome will just use a standard selector like `p` which would affect all elements instead of the element you want. – Vic May 30 '18 at 15:12
  • 12
    Following these exact instructions produces no real-time updates in latest chrome. – Tyguy7 Aug 30 '18 at 18:07
  • 2
    Worked for me in Chrome 72, as long as I put in a content property, even if blank like `content: ''` – Eric Majerus Feb 24 '19 at 23:55
  • @Vic, you will just need to add a class in the LHS of the inspector. Ie, right-click on the `p` tag, choose Edit as HTML, and then add `class="whatever"` – clayRay Mar 17 '20 at 01:48
3

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 <p> 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'.

Community
  • 1
  • 1
Timmah
  • 1,283
  • 2
  • 10
  • 26
  • The Ctrl clicking doesn't work for me (maybe because I'm on Mac?) but simply clicking on the link to the stylesheet to the right of a style declaration opens the stylesheet in the Sources tab and, yes, it is editable. Little did I know! Thanks! – Andrew Tibbetts Feb 26 '14 at 15:00
  • Hmmm. When I add a :before or :after declaration to the source sheet it doesn't apply. It seems I still need that little `::before` or `::after` element in the (inspector) markup. No? – Andrew Tibbetts Feb 26 '14 at 15:12
  • You can also get to it by opening the editor, then going to the Resources tab and selecting the 'Frames' folder at the top of the menu on the left. You can then click down through the file structure of your site and edit the CSS there. – Timmah Feb 27 '14 at 09:26
  • Aaaah, it was the double :: in the style that got me! Thanks! – Andrew Tibbetts Feb 27 '14 at 17:26
  • yeah, it's a bit misleading eh – Timmah Feb 28 '14 at 08:12