Insert generated content before or after an element, using the :before and :after pseudo-elements.
Syntax
content: "content_string_to_add"
none - Set the content to nothing.
normal - Set the content to normal, typically the same as nothing.
counter - Set the content as a counter.
attr(attribute) - Set the content to attribute.
string - Set the content to string.
open-quote - Set the content to an opening quote.
close-quote - Set the content to a closing quote.
no-open-quote - Remove the opening quote from the content.
no-close-quote - Remove the closing quote from the content.
url(url) - Set the content to an image file, a sound/video file, etc.).
inherit - Inherit from the parent element
Examples:
h1:after { content: " **DRAFT**";}
.emw3class:before { content: "PRIORITY "; }
#emw3id:after { content: ""; }
A counter can be a named counter (setup with counter-reset) or in the case of a List Item, the default "."
A common use for content is changing the appearance of links so that they display the full URL after the link text, typically this rule would be included in the PRINT stylesheet to only affect printed pages.
a:after { content: " (" attr(href) ")";
Including an image alongside <a> links can be done with a background rule.
(CSS 2) Browser Support: All major browsers.
“There is but an inch of difference between a cushioned chamber and a padded cell” ~ G. K. Chesterton
Related:
content - MDN Web Docs.
quotes - Type of quotation marks for embedded quotations.
visibility - Hide or show an element.