The content property is used with the ::before and ::after pseudo-elements to generate content. It is required for these pseudo-elements to render.

System Check

Which pseudo-elements are commonly used with the content property?

::before and ::after:hover and :active::first-letter::selection

Community Holo-Net

Share CSS Snippets

Created a cool tooltip or icon system with `content`? Share your code.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Generated Content

Pascual Vila

Frontend Instructor.

The content property is a unique CSS feature that allows you to insert generated content into your web pages. It is used almost exclusively with the ::before and ::after pseudo-elements.

What Can You Insert?

Strings: Text content like content: "Hello";
Images: Using content: url(icon.png);
Attributes: Using the attr() function to grab HTML attributes.
Counters: Automatic numbering for lists or sections.
Empty: content: ""; is used for clearing floats or creating CSS shapes.

Accessibility Note

Content added via CSS is generally treated as decorative. Some screen readers may read it, but behavior varies. Do not use the content property for critical information that users must read to understand the page. Use actual HTML text for that.

The `attr()` Function

The attr() function is powerful for print stylesheets or tooltips. For example, you can append the URL of a link in parentheses after the link text when printing the page: a::after { content: ' (' attr(href) ')'; }.

CSS Content Glossary

Generated Content: Content created by the browser based on CSS rules, rather than content present in the HTML document.
::before / ::after: Pseudo-elements that allow you to insert content before or after the content of the selected element.
attr(): A CSS function that retrieves the value of an attribute of the selected element (e.g., href, title, data-*).
Counter: Variables maintained by CSS that can be incremented to number elements like lists, headings, or figures.

📖 INDEX

CSS Magic Mastery

Concept 1: The Content Property