How can I inspect and tweak :before and :after pseudo-elements in-browser?

Question

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent.

Despite this feature being mentioned in this WebKit/Safari blog post (dated 2010), I can't find this feature at all in either Chrome or Safari. Chrome does at least have checkboxes to inspect :hover, :visited and :active states, but :before and :after are nowhere to be seen.

Additionally, this blog post (dated 2009!) mentions this capability exists in the IE dev tools, but I'm currently using Mac OS, so this is no help to me. Additionally, IE is not a browser I'm primarily targeting.

Is there any way of inspecting these pseudo-elements?

EDIT: In addition to being wrong about Firebug being unable to inspect these elements, I've found Opera to be pretty good at Inspecting :before and :after elements out of the box.

with firebug you can inspect the *style* of those pseudoelements. — Fabrizio Calderan, Apr 16 '12 at 13:14
yes, I'm able to change properties for pseudoelements via firebug 1.9.1 on Fx11/MacOS — Fabrizio Calderan, Apr 16 '12 at 13:26
Ah yes, I see it too. Apologies, I was mistaking Firefoxes new, inbuilt dev tools (which Id not used before) for some kind of Firebug redesign with inexplicably less features. I stand corrected ;) — majackson, Apr 16 '12 at 13:40
Check this answer to test pseudoelements in chrome and firefox http://stackoverflow.com/a/20716179/1868660 — Subodh Ghulaxe, Dec 21 '13 at 06:25
@majackson Firefox devtools do show before and after styles. — NoBugs, Feb 12 '14 at 06:50
@SubodhGhulaxe you are totally wrong, hover states have nothing to do with pseudo elements! — aditsu quit because SE is EVIL, Feb 25 '15 at 07:32

score 68 · Accepted Answer · answered Apr 16 '12 at 13:26

68

In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:

Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:

getComputedStyle(document.querySelector('html > body'), ':before');

answered Apr 16 '12 at 13:26

Rob W

341,306
83
791
678

11

I don't see this. What element are you inspecting in order to see this appear in the panel? Also, what version of Chrome are you using? – majackson Apr 16 '12 at 13:28
@majackson Chrome 18.0 Ubuntu 11.10. Inspect the `x` in this demo: http://jsfiddle.net/2M6JA/ – Rob W Apr 16 '12 at 13:28
I see the pseudoclasses in your demo, but not in my code, which makes me suspect I'm having another, different problem. In any case, it's obvious you are correct so I'll mark this as solved - many thanks! – majackson Apr 16 '12 at 13:34
It seams the :pseudo styles cannot be inspected in some cases. Check out this fork of @Rob W fiddle : http://jsfiddle.net/RQsY6/ => the pseudo-element on the a tag cannot be inspected. – Fabien Quatravaux Dec 20 '12 at 14:18
1

@FabienQuatravaux At least in Chrome 23, I see `div::before` with `content: 'x';` - screenshot: http://i.stack.imgur.com/nQ2TZ.png. EDIT: Our fiddles do not differ at all. Did you want to replace `div` with `a`? Still, the pseudo-element can still be inspected: http://jsfiddle.net/RQsY6/1/ (just select the anchor tag in the DOM tree). – Rob W Dec 20 '12 at 14:21
Sorry @Rob W, I must have forgotten to update it. Here is the new one: http://jsfiddle.net/RQsY6/2/. I think that when the css rule is too complex, it does not work (here : section p.test1.test2 a:before). When I simplify the rule (by removing one class), I can inspect the pseudo element. – Fabien Quatravaux Dec 20 '12 at 14:30

A.M.K · Answer 2 · 2013-11-14T14:21:36.493

38

As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:

Screenshot

You can select them as you would a normal element but if you remove the content style then the pseudo element will also be removed and the devtools focus will change to it's parent.

It appears that inherited CSS styles are not viewable and you can't edit CSS content from the elements panel.

edited Nov 14 '13 at 14:21

answered Nov 14 '13 at 13:19

A.M.K

16,727
4
32
64

This has been expanded in newer Chrome if you turn on "Show user agent shadow DOM" in the dev tools settings, under Elements. You can even see pseudo elements inside various specialized `input` tags, which is really helpful. Credit to [this (huge) page](https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/) for the tip! – Coderer Dec 02 '20 at 12:29

pop · Answer 3 · 2014-04-02T15:51:13.380

34

Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.

This won't show up:

:after {
  background-color: red;
}

This will show up in the inspector:

:after {
  content: "";   
  background-color: red;    
}

Hope it helps.

edited Apr 02 '14 at 15:51

answered Feb 17 '14 at 13:17

pop

3,464
3
26
43

score 9 · Answer 4 · answered Aug 26 '20 at 09:47

9

At least since Chrome 62 there's a setting in DevTools to 'Show user agent shadow DOM' which displays additional pseudo-elements like input placeholders, which wouldn't show up in the DOM tree otherwise.

More information: https://stackoverflow.com/a/26853319/3963594

answered Aug 26 '20 at 09:47

jgangso

638
10
19

3

You opened up a whole new world for me: pseudo elements now showing up in `
` tags inside the element's `#shadow-root`. Setting is on **Preferences > Elements > Show user agent shadow DOM** in Edge.
– CPHPython Dec 03 '21 at 13:07

score 5 · Answer 5 · answered Feb 25 '15 at 08:16

After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exact element which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.

Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".

Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.

score 1 · Answer 6 · answered Feb 12 '14 at 06:49

1

Firefox has had this feature for awhile now, just right click, "inspect element", and see the before and after elements in the right panel of the inspector.

answered Feb 12 '14 at 06:49

NoBugs

9,310
13
80
146

1

I don't see the `:after` and `:before` pseudo elements in the "native" inspector tool - toggling the pseudo elements gives me `hover`, `active` and `focus` only. I can see them in Firebug though. – sameers Oct 15 '15 at 23:16
@sameers Are you talking about the toggles on right click menu? Because :before and :after aren't something you toggle there, they should always show up in the css inspector. – NoBugs Oct 16 '15 at 12:37

score 1 · Answer 7 · answered Apr 29 '20 at 11:08

1

Select Element--> select hover checked ---> you can see ::before and after elements

answered Apr 29 '20 at 11:08

Stupid_designer

88
9

How can I inspect and tweak :before and :after pseudo-elements in-browser?

7 Answers7

Linked