The CSS content property inserts generated content, most often through the ::before and ::after pseudo-elements. It can add quotation marks, punctuation, or an empty box used to build a visual control. section 4.1.6 section 10.3.5
Common uses include:
- Add opening and closing quotation marks with content: open-quote and content: close-quote; these use symbols defined by the quotes property or the document language. section 4.1.6
- Insert punctuation after description terms with a declaration such as dt::after { content: ": "; }. section 8.2.5
- Create an empty, display:block pseudo-element that can become the inner disk or check mark of a custom radio button or checkbox. section 10.3.5
Add quotation marks to a blockquote
blockquote::before { content: open-quote; } blockquote::after { content: close-quote; } These declarations add language-appropriate opening and closing marks without placing the symbols manually in the HTML. section 4.1.6
Listing 8.13 Styling the description list
th, dt { #1
color: #3a3a3a;
font-weight: normal;
font-size: .875em;
}
dt::after { #2
content: ": "; #2
} #2
Inspect the description-list example to see content used with ::after to insert a colon and space after every term. section 8.2.5
