Menu
For the below code :
<!DOCTYPE html>
<html>
<head>
<style>
div::before {
content: "Adding Before -";
}
</style>
</head>
<body>
<p>Test</p>
<div>Content</div>
</body>
</html>
The out put would be "Adding Before - Content"
But my question is, in the DOM i can see only the "<div>Content</div>". Where are the words "Adding Before -" present in the DOM?
EDITED : i want to know if the values that we would would be present in theDOM or not.If no, please can you explain the architecture as how it works.
749
asked Sep 01 '25 03:09
CSS pseudo-elements such as ::before, ::after and ::first-line are not present in the DOM because they are not real DOM elements (hence, "pseudo"). Pseudo-elements are virtual elements created by CSS and rendered by browsers. They are not part of the HTML. Also, because they are not part of the DOM they cannot be directly targeted and controlled with JavaScript. You should, however, be able to access pseudo-elements directly through the browser.
156
You may read its content by retrieving the computed style of the affected DOM node.
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
Get Pseudo-Element Properties with JavaScript
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
