Posted 7 months ago. Visible to the public.

How to access before/after pseudo element styles with JavaScript

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

Copy
let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery

Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements.

Copy
let style = window.getComputedStyle(element, '::before') let color = style.getPropertyValue('background-color')

The returned color will be a string with a color value like "rgb(253, 126, 20)".

Bonus: Hex color strings

If you want to convert that to a hex color, here are two solutions.

JavaScript

Modern JavaScript (ES2017+) can do it like this:

Copy
let hexColor = rgbColor .match(/(\d+), (\d+), (\d+)/) .slice(1, 4) .map((number) => { return Number(number).toString(16).padStart(2, '0') }) .join('') .replace(/^/, '#')

Ruby

My use case was comparing colors in an integration test, so I used JS to get the pseudo element's style via Selenium, and then processed it in my Ruby code like so:

Copy
hex_color = rgb_color .match(/(\d+), (\d+), (\d+)/) .captures .map { |number| number.to_i.to_s(16).rjust(2, '0') } .join .prepend('#')

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
7 months ago
by Arne Hartherz
Keywords:
selenium, capybara, webdriver, chrome, firefox
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more