Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    jQuery UI DatePicker: Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...

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. Devang Paliwal

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

  4. Toni Michel

    Nice!

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

    Thanks!

    • David Walsh

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

  5. Melih O.

    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.

  9. Lore

    How would you make a function that could reference self?
    When I place this in a jQuery function and try to replace $('.element') with ($(this)), I have issues.

    • Neeph

      Did you ever find a way to use ($(this))?

  10. Craig

    How about when the desired element is a child of an :active element? Like:

    .parent:active .child {
  display: inline-block
}
    • Shakey

      :active is a pseudo class, not a pseudo element, so you can’t grab it with getComputedStyle

  11. Max

    Great Post! However, the code gives me the certain values like height and top as px in Chrome and as % in Firefox and IE. Anyway to get a consistent result for all browsers?

  12. Emeka

    I am looking to bind event to pseudo classes with vanilla javascript. Isn’t there a hack already

  13. Roshan Karmacharya

    like getPropertyValue, is there any setProperty methods that can replace the contents?

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