How does the CSS content attribute work?

Question

Can anyone explain how the internal content attribute works in the browser. Does it create a new node in the DOM, even if it does not appear in the webInspector. And will it have the same effects on memory consumption as a real DOM node?

Answer 1

From W3C :

This property (content) is used with: before and: after pseudo-elements to generate content in the document. Generated content does not change the document tree. In particular, it does not return back to the document (for example, for reparation).

In addition, according to MDN :

Objects inserted using the content property are replaced with anonymous elements. In CSS, a replaced element is an element; the presentation is beyond CSS. These are some kind of external objects whose presentation is not dependent on CSS. typical replaceable elements are <image> , <object> , <video> or form an element of type <textarea> , <input> . Some elements, such as <audio> or <canvas> , are replaced elements only in certain cases. An object inserted using CSS Content Properties are anonymous replaced elements. In some cases, CSS handled replaced elements, for example, when calculating fields and some automatic values. Note that some substituted elements, but not all, have an internal dimension or a specific baseline that some CSS properties use as vertical alignment.

Answer 2

I found this on CSS 2.1 spec

Generated content does not change the document tree. In particular, this does not return back to the document language processor (for example, for reprocessing).