Seeing CSS Pseudo-Elements in Firebug

How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger

Inspect the element, and then:

For Firebug:

Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).

For Chrome:

You can see both the psuedo-class rules and force them on elements.

To see them in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

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

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');

• window.getComputedStyle
• document.querySelector

How do I inspect CSS pseudo classes with firebug?

It's pretty easy. Just select the element you want to inspect. And then, from the panel on the right side, click on the Style menu item. There you can select the pseudo class :hover

EDIT

Here's an image :

Manipulating CSS styles of pseudo elements in Firebug

You can edit a stylesheet in the CSS tab and

• add new rules for pseudo-elements
• alter existing pseudo-element rules

However, I can't find any pseudo-element styles in the computed styles panel. Probably because the styles don't apply to the elements but rather their contained pseudo-elements. Neither can I find a way to inspect pseudo-elements using Firebug.

Inspect element with pseudo-class in IE

I've never found this in the native developer tools included with IE.

Inspecting Hover-state in Firebug or Chrome DevTools

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.

---

Related Topics