How to get a DOM element's ::before content with JavaScript?

javascript css dom pseudo-element
xgqfrms picture xgqfrms · Jun 3, 2017 · Viewed 12.7k times · Source

I want to know whether it is possible to get a DOM element's ::before content, which was set by CSS3.

I have tried some ways, but I still can't make it, so it's very confusing to me!

// https://rollbar.com/docs/

const links = document.querySelectorAll(`ul.image-list a`);

links[0];
// <a href="/docs/notifier/rollbar-gem/" class="ruby">::before Ruby</a>

links[0];
//

links[0].textContent;
//"Ruby"

links[0].innerText;
// "Ruby"

links[0].innerHTML;
// "Ruby"

// ??? links[0]::before;

This is the case:

![enter image description here

Answer

Patrick Roberts picture Patrick Roberts · Jun 3, 2017

Pass ":before" as the second parameter to window.getComputedStyle():

console.log(getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content'));
p::before,
p::after {
  content: ' Test ';
}
<p>Lorem Ipsum</p>

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Check if an element contains a class in JavaScript?

Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class? Currently, I'm doing this: The issue is that if I change the HTML to this... <div id="test" class="class1 class5">&…

Read More
Uncaught TypeError: Cannot read property 'top' of undefined

I apologize if this question has already been answered. I've tried searching for solutions but could not find any that suited my code. I'm still new to jQuery. I have two different types of sticky menus for two different pages. …

Read More