Get Pseudo-Element Properties with JavaScript

By  on  

CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements.  To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there's a method for getting them!

Assume your CSS looks like:

.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}

To retrieve the color property of the .element:before, you could use the following JavaScript:

var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')

Passing the pseudo-element as the second argument to window.getComputedStyle allows access to said pseudo-element styles!  Keep this snippet in your toolbox for years to come -- pseudo-elements will only grow more useful with broader browser support!

Track.js Error Reporting

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

  • MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

Discussion

  1. MaxArt

    Yeah, too bad this doesn’t work with IE8 and previous.
    currentStyle is good for some things, but… not for this one.

  2. MaxArt

    By the way, I forgot to say that it’s usually recommended to use document.defaultView.getComputedStyle instead of window.getComputedStyle, because there are cases where document.defaultView !== window.

    I don’t know which ones, though. I guess it’s not the case of “common” web pages.

    • Martin

      From the MDN documentation:

      In many code samples online, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It’s likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However there is a single case where the defaultView’s method must be used: when using Firefox 3.6 to access framed styles.

      https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

  3. Very useful! I ran across this scenerio many times where i wanted to access the psedo element props.

  4. Nice!

    Long time a go I was looking for a way to bind events on pseudo elements, is that posible today?

    Thanks!

    • I don’t believe that’s possible yet Toni!

  5. Thanks for this solution. Was looking for this!

  6. Hal D.

    With content:url(“some image”) as a property Firefox correctly gets that string using any of these three methods:

    getComputedStyle(someelement,"::after").getPropertyValue("content")
    getComputedStyle(someelement,"::after").content
    getComputedStyle(someelement,"::after")..getPropertyCSSValue("content").cssText
    

    None of these methods work in Chrome, they either return null or undefined. What gives?

  7. gaurav

    Is there a way, we can set the pseudo style value back in css?

  8. sgaawc

    Pseudo Element’s integration with Javascript is new to me. I will make sure to give it a try and see how it works with diff browsers. but I wonder if there is any way to associate handlers to these elements.

    Thanks.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!