Retrieving content value of ::after or ::before in JavaScript

For the following element:

#element::after {
  content: 'Custom value'
}

If we needed a way of retrieving content value of ::after in JavaScript, that is ‘Custom value’, we would need to make use of the getComputedStyle() method available on the window object.

const getContentValueOfPseudoElement = (element, pseudoSelector) => {
    const styles = window.getComputedStyle(el, '::'+ pseudoSelector);
    return styles.content;
}

Then, if we wanted to get the content value of ::before, we would do:

console.log(getContentOfPseudoElement(document.getElementById('element'), 'before'));

Or if we wanted the ::after element:

console.log(getContentOfPseudoElement(document.getElementById('element'), 'after'));

It is also worth noting that if the content property is not defined, we will get the string “none” as the result from the method.

The post Retrieving content value of ::after or ::before in JavaScript appeared first on Wisdom Geek.