How the CSS content attribute works?

Question

Can some one explain how the content attribute internally work in the browser. Does it create a new node in the DOM even it is not displayed in the webInspector. And will it have the same influences of memory consumption like a real DOM node?

Answer 1

I found this on CSS 2.1 spec

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

Answer 2

From the W3C:

This property (content) is used with the :before and :after pseudo-elements to generate content in a document. Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

Also, according to MDN:

Objects inserted using the content property are anonymous replaced elements. In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS. Typical replaced elements are <image>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Object inserted using the CSS content properties are anonymous replaced elements. CSS handled replaced elements specifically in some cases, like when calculating margins and some auto values. Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like vertical-align.