Inspect CSS :before elements in the web inspector

Question

Is there any way to inspect elements that were added via the CSS :before selector, in the Chrome or FF web inspector and inspect their calculated styles (and manipulate them on the fly)?

Setup is

li:before {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
}

So it's real block element without any HTML, but on inspection he only selects the related LI element. The "force element state"-option does not work either, it's only for interaction states like :hover but not :before

possible duplicate of [How can I inspect and tweak :before and :after pseudoclasses in-browser?](http://stackoverflow.com/questions/10174719/how-can-i-inspect-and-tweak-before-and-after-pseudoclasses-in-browser) — Matthew Blancarte, Aug 21 '13 at 17:09

score 0 · Answer 1 · answered Aug 21 '13 at 17:14

0

Yes, there is. Inspect the element itself (not the pseudo), the pseudo element's styles should show up below, before the inherited styles.

answered Aug 21 '13 at 17:14

Madara's Ghost

172,118
50
264
308

Okay right so that's for CSS manipulation, but I guess getting the full list of "calculated styles" is impossible? – user1446186 Aug 21 '13 at 17:27
@user1446186: I believe that much is not possible. – Madara's Ghost Aug 21 '13 at 17:30

score 0 · Answer 2 · answered Nov 14 '13 at 13:58

0

Pseudo elements now show in Chrome Inspector (as of Chrome 31). See the pseudo element in Chrome's built in inspector. You also can edit the css properties as you'd expect.

See the pseudo element in Chrome's built in inspector

answered Nov 14 '13 at 13:58

circlecube

706
1
10
19

1

Is there a way to _remove_ the :before or :after from the web inspector? Just curious. :) – Ross Nov 14 '13 at 18:32

Inspect CSS :before elements in the web inspector

2 Answers2