where is the content of ::before added in DOM

Question

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.

can't see them in the live html...because it is css. Similarly it isn't part of that element text either — charlietfl, Aug 02 '15 at 18:37
possible duplicate of [How to access CSS generated content with JavaScript](http://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript) — TylerH, Aug 02 '15 at 18:42
For reference, Chrome shows the psuedo-element in the Inspector, in its appropriate place (ie first "child" of the parent). This is only possible because it's the browser doing it - you have no such access. — Niet the Dark Absol, Aug 02 '15 at 23:33
@user1150362, your tag `javascript` led me to the wrong answer — w35l3y, Aug 04 '15 at 09:38

Michael Benjamin · Accepted Answer · 2015-08-03T00:23:27.423

2

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.

edited Aug 03 '15 at 00:23

answered Aug 02 '15 at 23:41

Michael Benjamin

346,931
104
581
701

Thanks, but where would these values be stored if not in DOM? Any technical explanation would help me out. – user1150362 Aug 03 '15 at 01:40
In the rendering engine. Open Chrome Dev Tools or Firefox Inspector. You will see pseudo-elements in rendered in the HTML pane. – Michael Benjamin Aug 03 '15 at 01:41
This might help you as well: http://stackoverflow.com/questions/10174719/how-can-i-inspect-and-tweak-before-and-after-pseudo-elements-in-browser – Michael Benjamin Aug 03 '15 at 01:46

score 1 · Answer 2 · answered Aug 03 '15 at 00:36

1

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

answered Aug 03 '15 at 00:36

w35l3y

8,613
3
39
51

where is the content of ::before added in DOM

2 Answers2

Linked