The CSS content property lets the browser add generated content: little pieces of text or special characters that you did not type into the page markup. Think of it as asking CSS to place a tiny label or decoration beside an element. section 19.18
It is used with the ::before and ::after pseudo-elements. ::before inserts something before an element’s existing content, while ::after inserts it afterward. The browser creates these pseudo-elements automatically, so they are not regular objects in the page hierarchy. section 19.18
element::before|after { #1 #2
content: value; #3
content_styles; #4
}
Use an element selector, choose ::before or ::after, then give content a value. Add optional CSS declarations to style the inserted result. section 19.18
Add a paragraph mark
This rule adds a pilcrow after every paragraph: p::after { content: '¶'; } The paragraph text stays as it is; CSS simply creates the ¶ after it. section 19.18
Generated content can be useful for small repeated details:
- Add a character after an element, such as a paragraph mark. section 19.18
- Replace ordinary unordered-list bullets with custom ones by removing the default bullets and adding a character through li::before. section 19.18
- Insert special characters with a hexadecimal character code preceded by a backslash, such as content: '\0266f'; for a musical sharp sign. section 19.18
For new CSS, use the double-colon forms ::before and ::after. The older single-colon forms :before and :after were used for Internet Explorer 8 support. section 19.18
