How to Inspect and Tweak :Before and :After Pseudo-Elements In-Browser

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

Is there any way to inspect ::first-line and ::first-letter pseudo-elements in developer tools?

1. Firefox (64 and Nightly) I was able to easily see both ::first-line and ::first-letter pseudo-elements in the Firefox inspector:

.

You can see those styles in your inspector by expanding the 'pseudo-elements' tab:

2. Chrome (72) I have no trouble seeing it in the Chrome inspector either (applies to both ::first-line and ::first-letter):

Was not able to find the pseudo-element in Safari.

How to inspect pseudo elements using Microsoft Edge and Internet Explorer 11 developer tools

Edge shows pseudo element styles on the given element, but after other (even inherited) styles....

So scroll down.

How do you set hover using Chrome Dev Tools on pseudo elements?

I don't believe :hover can be applied directly to a pseudo-element. The Selectors Level 3 specification states:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

I may be wrong, but I believe pseudo-classes (like :hover) are part of the subjects of the selector. This itself means that specifying a pseudo-class after a pseudo-element is invalid.

This in turn means that it isn't possible to apply :hover styling specifically on the pseudo-element, however as others have stated in the comments you can do this on the element they belong to instead.

*::before:hover {
  /* This markup is INVALID as pseudo-class selectors
   * cannot be placed after pseudo-element selectors.
   */
}

*:hover::before {
  /* This would apply styling to the pseudo-element
   * when the containing element is hovered over.
   */
}

Is there way to get computed metrics of pseudo elements in Safari web inspector?

According to changelog, this issue has been addressed in Safari 9.1.

HTML pseudo-elements are now visible in the DOM tree allowing for easier styling. The ::before element is highlighted in Figure 1.

Source: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html

---

Related Topics