{"id":14031,"date":"2011-09-05T20:36:16","date_gmt":"2011-09-06T03:36:16","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14031"},"modified":"2021-04-23T09:38:01","modified_gmt":"2021-04-23T16:38:01","slug":"content","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content\/","title":{"rendered":"content"},"content":{"rendered":"\n

The content<\/code> property in CSS is used in conjunction with the pseudo-elements ::before<\/a><\/code> and ::after<\/a><\/code>. It is used to literally insert content. There are four value types it can have.<\/p>\n\n\n

String<\/h4>\n\n\n
.name::before {\n  content: \"Name: \";\n}<\/code><\/pre>\n\n\n\n
Then an element like this:<\/p>\n\n\n\n
<div class=\"name\">Chris<\/div><\/code><\/pre>\n\n\n\n
Would render like this:<\/p>\n\n\n\n
Name: Chris<\/code><\/pre>\n\n\n\n
It could also be an empty string, which is commonly seen in things like the clearfix<\/a>.<\/p>\n\n\n
Counter<\/h4>\n\n\n
div::before {\n  content: counter(my-counter);\n}<\/code><\/pre>\n\n\n\n
More information about that.<\/a><\/p>\n\n\n
Image<\/h4>\n\n\n
div::before {\n  content: url(image.jpg);\n}<\/code><\/pre>\n\n\n\n
This is literally an image on the page like <\/code> would be. It could also be a gradient. Note that you cannot change the dimensions of the image when inserted this way. You could also insert an image by using an empty string for the content, making it display: block<\/code> in some way, sizing it, and using background-image<\/code>. That way you could re-size it with background-size<\/code>.<\/p>\n\n\n
Attribute<\/h4>\n\n\n
You can use values (strings, anyway) that are taken right from attributes in the HTML.<\/p>\n\n\n\n
<div data-visual-label=\"Widget Rating\">60<\/div><\/code><\/pre>\n\n\n\n
[data-visual-label]::before {\n  content: attr(data-visual-label) \": \";\n}\n\n\/* Classic print trick! Show URLs! *\/\n@media (print) {\n  a[href]::after {\n    content: \" (\" attr(href) \") \"; \/* you could combine a url() in here even if you wanted *\/\n  }\n}<\/code><\/pre>\n\n\n\n
The attr()<\/code> function doesn’t have “types” just yet, so you can’t pass a value like 20px<\/code> (just strings), but someday! <\/p>\n\n\n
Alternative Text<\/h3>\n\n\n
The spec<\/a> says that you can use a \/<\/code> in the syntax to list alternate text. For example…<\/p>\n\n\n\n
.el::before {\n  content: \"⭐️\" \/ \"Alternate Text for that star\";\n\n  content: \"\u2192\" \/ \"\"; \/* Visual only, don't read. *\/\n}<\/code><\/pre>\n\n\n\n
Perhaps you could use it like…<\/p>\n\n\n\n
<ul aria-label=\"To Do List\">\n  <li>Make Bed<\/li>\n  <li data-alt-pseudo=\"Completed\">Grocery Shop<\/li>\n  <li>Sweep Driveway<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
[data-alt-pseudo=\"Completed\"]::before {\n  content: \"✅\"; \/* fallback *\/\n  content: \"✅\" \/ attr(data-alt-pseudo);\n}<\/code><\/pre>\n\n\n
More Information<\/h3>\n\n\n
Content inserted in this way isn’t really in the DOM<\/em>, so it has some limitations. For instance, you can’t attach an event directly (only) to pseudo-elements. It is also inconsistent whether or not text inserted in this way is read by screen readers (it usually is these days) or if you can select it (it usually isn’t these days). <\/p>\n\n\n\n