What CSS means by generated content is content that’s not physically present in the HTML markup. For example, when you create an ordered list, the numbers are not in the HTML. The browser generates and inserts them automatically, and it updates the sequence if items are added or removed. The ::before and ::after pseudo-elements perform a similar function, but go much further, allowing you to add just about any type of automatically generated content not only before list items, but before and after almost any HTML element.
The ::before and ::after pseudo-elements have been around for a long time. They’re part of the ...