Let us suppose we had an HTML element which had an ::after property assigned to it. We are going to be retrieving the content value of ::after or ::before of this element using JavaScript. For the following element:
#element::after {
content: 'Custom value'
}
JavaScriptIf 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;
}
JavaScriptThen, if we wanted to get the content value of ::before, we would do:
console.log(getContentOfPseudoElement(document.getElementById('element'), 'before'));
JavaScriptOr if we wanted the ::after element:
console.log(getContentOfPseudoElement(document.getElementById('element'), 'after'));
JavaScriptIt is also worth noting that if the content property is not defined, we will get the string “none” as the result from the method.
While working on a project, I wanted to do an integrity check of a file…
Popovers have been a problem that was typically solved by using a third-party solution. But…
Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…
Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…
Have you felt particularly annoyed by the time it takes to clone a large repository,…
Within a React or Next.js app, if you encounter the error "Hydration failed because the…