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 imagine it’s because 1 is a unit-less number (i.e. 1 vs. 1px) and not a string. You can’t trick it either! I tried to be clever like this:

/* Invalid, no tricks */
::after {
content: "" 1;
}

You can output numbers from attributes though, as you might suspect:

Coffee

/* This "works" */
div::after {
content: " $" attr(data-price);
}

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

Even though you can get and display that number, it’s just a string. You can’t really do anything with it.

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

The person who reached out to me over email was specifically confused why they were unable to use calc() on content. 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.