Monday, October 7

Tag: Valid CSS content

CSS Tricks

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...