what does he mean when he says that Pseudo-Elements

Hi Ubo,

A true explanation for the DOM is probably too large to type all on a message board, but it is essentially a structured map of a web page. It’s actually a data structure called a tree because it branches off from the top (or root element/node).

So if you were to think of a map of a family tree, the parents would be at the top, and then their children would be branched off from those parents, and if those children had children they would be branched off from that particular child of the original parents, etc, etc.

A DOM is like that. It stands for Document Object Model. The html element is at the root of the tree, then the head and body elements are its children. The div and h1 and main and img tags/elements are all descendants of the body element, while the meta and title tags/elements are descendants of the head elements. A model of that is created when you create a webpage and the browser uses it to display/paint your webpage the correct way.

A pseudo element is one that is not really there, but it acts like one. A pseudo element is created in CSS in the way that Lisa explained above, but what I think you’re probably confused about will make more sense like this...

When adding ::before or ::after to a selector (you are creating a “phony” element in the DOM). After you add before or after, you then give its rule a content property (and that property a value). Now the space before or after that selected element in the DOM can be treated as if an actual element were there. It’s used a lot with floats to do something called a clearfix.

Here an article on pseudo elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements