Valid CSS Content
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="✅"
class="email">
chriscoyier@gmail.com
</div>
.email::before {
content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}
The property generally takes anything you drop in there. However, there are some invalid 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.
This works fine:
/* Valid */
::after {
content: "1";
}
...but this does not:
/* Invalid, not a string */
::after {
content: 1;
}
I'm not entirely sure why, but I imagi...