O'Reilly

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

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

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!

Recently on David Walsh Blog

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...