Inserting Generated Content

Generated content is specified in the style sheet with the :before and :after pseudoelements (pseudoelements are discussed in Chapter 17). The :before selector inserts content (most commonly, but not limited to, text characters, an image, or quotation marks) immediately before the targeted element. The :after pseudoelement inserts the generated content just after the targeted element.

Both pseudoelements are used in conjunction with the content property, which is used to specify where the generated content is to be inserted.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.