{"id":276996,"date":"2018-10-11T07:03:19","date_gmt":"2018-10-11T14:03:19","guid":{"rendered":"http:\/\/css-tricks.com\/?p=276996"},"modified":"2018-10-11T07:03:19","modified_gmt":"2018-10-11T14:03:19","slug":"valid-css-content","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/valid-css-content\/","title":{"rendered":"Valid CSS Content"},"content":{"rendered":"

There is a content<\/code> property<\/a> in CSS that’s made to use in tandem with the ::before<\/code> and ::after<\/code><\/a> pseudo elements. It injects content into the element.<\/p>\n

Here’s an example:<\/p>\n

<div \r\n  data-done=\"&#x2705;\"\r\n  class=\"email\">\r\n    chriscoyier@gmail.com\r\n<\/div><\/code><\/pre>\n
.email::before {\r\n  content: attr(data-done) \" Email: \"; \/* This gets inserted before the email address *\/\r\n}<\/code><\/pre>\n
\"\"<\/figure>\n
The property generally takes anything you drop in there. However, there are some invalid<\/em> values it won’t accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.<\/p>\n
<\/p>\n
This works fine:<\/p>\n
\/* Valid *\/\r\n::after {\r\n  content: \"1\";\r\n}<\/code><\/pre>\n
…but this does not:<\/p>\n
\/* Invalid, not a string *\/\r\n::after {\r\n  content: 1;\r\n}<\/code><\/pre>\n
I’m not entirely sure why, but I imagine it’s because 1<\/code> is a unit-less number (i.e. 1<\/code> vs. 1px<\/code>) and not a string. You can’t trick it either! I tried to be clever like this:<\/p>\n
\/* Invalid, no tricks *\/\r\n::after {\r\n  content: \"\" 1;\r\n}<\/code><\/pre>\n
You can output numbers from attributes though, as you might suspect:<\/p>\n
<div data-price=\"4\">Coffee<\/div><\/code><\/pre>\n
\/* This \"works\" *\/\r\ndiv::after {\r\n  content: \" $\" attr(data-price);\r\n}<\/code><\/pre>\n
But of course, you’d never use generated content for important information like a price, right?! (Please don’t. It’s not very accessible, nor is the text selectable.)<\/p>\n
Even though you can get and display that number, it’s just a string. You can’t really do anything with it.<\/p>\n
<div data-price=\"4\" data-sale-modifier=\"0.9\">Coffee<\/div><\/code><\/pre>\n
\/* Not gonna happen *\/\r\ndiv::after {\r\n  content: \" $\" \r\n    calc(attr(data-price) * attr(data-sale-modifier));\r\n}<\/code><\/pre>\n
You can’t use numbers, period:<\/p>\n
\/* Nope *\/\r\n::after {\r\n  content: calc(2 + 2);\r\n}<\/code><\/pre>\n
Heads up! Don’t try concatenating strings like you might in PHP or JavaScript:<\/p>\n
\/* These will break *\/\r\n::after {\r\n  content: \"1\" . \"2\" . \"3\";\r\n  content: \"1\" + \"2\" + \"3\";\r\n\r\n  \/* Use spaces *\/\r\n  content: \"1\" \"2\" \"3\";\r\n  \/* Or nothing *\/\r\n  content: \"1 2 3\";\r\n  \/* The type of quote (single or double) doesn't matter, but content not coming back from attr() does need to be quoted. *\/\r\n}<\/code><\/pre>\n
There is  a thing in the spec<\/a> for converting attributes into the actual type rather than treating them all like strings… <\/p>\n
<wood length=\"12\" \/><\/code><\/pre>\n
wood {\r\n  width: attr(length em); \/* or other values like \"number\", \"px\", or \"url\" *\/\r\n}<\/code><\/pre>\n
…but I’m fairly sure that isn’t working anywhere yet. Plus, it doesn’t help us with pseudo elements anyway, since strings already work and numbers don’t.<\/p>\n
The person who reached out to me over email was specifically confused why they were unable to use calc()<\/code> on content<\/code>. I’m not sure I can help you do math in this situation, but it’s worth knowing that pseudo elements can be counters, and those counters can do their own limited form of math. For example, here’s a counter that starts at 12 and increments by -2 for each element at that level in the DOM.<\/p>\n
See the Pen Backwards Double Countdown<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
The only other thing we haven’t mentioned here is that a pseudo element can be an image. For example:<\/p>\n
p:before {\r\n  content: url(image.jpg);\r\n}<\/code><\/pre>\n
…but it’s weirdly limited. You can’t even resize the image. \u00af\\_(\u30c4)_\/\u00af<\/p>\n
Much more common is using an empty string for the value (content: \"\";<\/code>) which can do things like clear floats<\/a> but also be positioned, sized and have a background of its own.<\/p>\n","protected":false},"excerpt":{"rendered":"
There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. Here’s an example: <div data-done=”&#x2705;” class=”email”> chriscoyier@gmail.com <\/div> .email::before { content: attr(data-done) ” Email: “; \/* This gets inserted before the email address *\/ } The property generally takes […]<\/p>\n","protected":false},"author":3,"featured_media":277263,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The content property takes a lot of values and can do neat things. But there are some things it won't accept.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[797,1154],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/content-property-awesome.jpg?fit=2400%2C1200&ssl=1","jetpack-related-posts":[{"id":350670,"url":"https:\/\/css-tricks.com\/css-pseudo-commas\/","url_meta":{"origin":276996,"position":0},"title":"CSS Pseudo Commas","date":"August 30, 2021","format":false,"excerpt":"A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation. CodePen Embed Fallback How it works The trick? First, it's to make\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/inline-list.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301462,"url":"https:\/\/css-tricks.com\/re-creating-the-his-dark-materials-logo-in-css\/","url_meta":{"origin":276996,"position":1},"title":"Re-creating the \u2018His Dark Materials\u2019 Logo in CSS","date":"January 10, 2020","format":false,"excerpt":"The text logo has a slash cut through the text. You set two copies on top of one another, cropping both of them with the clip-path property. What's interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/his-dark-materials.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339586,"url":"https:\/\/css-tricks.com\/custom-state-pseudo-classes-in-chrome\/","url_meta":{"origin":276996,"position":2},"title":"Custom State Pseudo-Classes in Chrome","date":"May 6, 2021","format":false,"excerpt":"There is an increasing number of \u201ccustom\u201d features on the web platform. We have custom properties (--my-property), custom elements (), and custom events (new CustomEvent('myEvent')). At one point, we might even get custom media queries (@media (--my-media)). But that\u2019s not all! You might have missed it because it wasn\u2019t mentioned\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334360,"url":"https:\/\/css-tricks.com\/weekly-platform-news-webkit-autofill-using-cursor-pointer-delaying-autoplay-videos\/","url_meta":{"origin":276996,"position":3},"title":"Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos","date":"February 12, 2021","format":false,"excerpt":"In this week's roundup, WebKit's prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay until they're in view... plus more! Let's jump right into it. CSS\u00a0::-webkit-autofill\u00a0has become a standard feature Chrome, Safari, and\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210212.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351992,"url":"https:\/\/css-tricks.com\/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css\/","url_meta":{"origin":276996,"position":4},"title":"7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS","date":"September 21, 2021","format":false,"excerpt":"CSS ::before and ::after pseudo-elements allow you to insert \"content\" before and after any non-replaced element (e.g. they work on a 
 but not an ). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn\u2019t use it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pseudo-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308234,"url":"https:\/\/css-tricks.com\/pseudo-elements-in-the-web-animations-api\/","url_meta":{"origin":276996,"position":5},"title":"Pseudo-elements in the Web Animations API","date":"May 13, 2020","format":false,"excerpt":"To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don't really offer a direct reference? Dan Wilson covers a (newish?) part of the API itself: const logo = document.getElementById('logo'); logo.animate({ opacity: [0,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276996"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=276996"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276996\/revisions"}],"predecessor-version":[{"id":277262,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276996\/revisions\/277262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/277263"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=276996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=276996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=276996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}