Is it possible to use CSS Custom Properties in values for the content property?

Question

Example:

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

When this is rendered, the computed CSS is literally that value.

content: var(--PrimaryThemeColor);

Even if I'm using a post-processor that injects the computed value as a fallback, the value itself isn't a string, so it's invalid for content.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

Paleography

What do you mean by "with or without quotes"? It should work correctly with quotes. – Irishman

Yes it's possible. But your issue seems to be converting a color to a string instead of using a variable in content. – House

The CSS variable works when applied to a CSS property, but not when applied to the content. CSS variables do not behave like javascript variables printing its value as string. – Saldivar

If the variable holds a number, this is possible using CSS Counters. – Ellinger

Answer 1

The value of the custom property has to be a string (either a string literal, an attr() expression, or in the case of content any combination of any number of said tokens) in order for the corresponding var() expression to work correctly anywhere that a string is expected.

It is not possible to convert a non-string value to a string or between any two data types through the var() function, if that's what you're asking. The value is always parsed, stored and substituted as-is, and the value can comprise any number of any kind of token, so converting between data types would be... pretty difficult.

Irishman

Right, I pointed that out already. > "the value itself isn't a string, so it's invalid for content." – Paleography

@Kevin Suttle: Yeah - so you've answered your own question. – Irishman

Seems like a reasonably common use case, so it would nice to extend the var syntax to be var(--name type-or-unit). This would allow both font-size: var(--size px), and thereby avoid the cumbersome font-size: calc(1px * var(--size)), and in the case here, would allow content: var(--primaryThemeColor string). (type-of-unit here, of course, has the same semantics as when used in the attr() function.) – Keene