CSS Variables (Custom Properties) in Pseudo-Element "Content" Property

CSS Variables (custom properties) in Pseudo-element content Property

Edit for clarity: CSS custom properties with integer values can be displayed in a pseudo-element's content property via a CSS counter.

div {
    --variable: 123;
}
span:after {
    counter-reset: variable var(--variable);
    content: counter(variable);
}

<div>The variable is <span></span>.</div>

How to store inherit value inside a CSS variable (aka custom property)?

In such case, we can consider the fallback value of a CSS variable. Like explained in the specification we can write something like this:

background:var(--color,inherit)

By doing this, we tell our property (background) to use inherit in case --color is not defined.

This may solve the issue but in our case it won't be enough since --color is always defined at :root level and will get inherited¹ by the pseudo element thus we will never use the fallback value.

To fix this we can consider the initial value in order to undefine our custom property and force the use of the fallback value. As described in the specification:

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().

and

To substitute a var() in a property’s value:

If the custom property named by the first argument to the var()
function is animation-tainted, and the var() function is being used in
the animation property or one of its longhands, treat the custom
property as having its initial value for the rest of this algorithm.

If the value of the custom property named by the first argument to the
var() function is anything but the initial value, replace the var()
function by the value of the corresponding custom property. Otherwise,

if the var() function has a fallback value as its second argument,
replace the var() function by the fallback value. If there are any
var() references in the fallback, substitute them as well.

Otherwise, the property containing the var() function is invalid at
computed-value time

Our code will then look like this:

:root {

  --color:rgba(25,25,25,0.5); /*defined as the default value*/

}

.box {

  width:50px;

  height:50px;

  display:inline-block;

  margin-right:30px;

  border-radius:50%;

  position:relative;

}

.red {background:rgba(255,0,0,0.5);}

.blue {background:rgba(0,0,255,0.5);}

.box:before{

  content:"";

  position:absolute;

  top:0;left:0;right:0;bottom:0;

  border-radius:50%;

  transform:translateX(30px);

  background:var(--color,inherit);

  filter:invert(1);

}

<div class="box red" style="--color:initial;">

</div>

<div class="box blue" style="--color:initial;">

</div>

<div class="box" style="background:grey;--color:initial;">

</div>

How do I add quotes to a CSS Variable value, to use it in ::before/::after content?

UPDATE:

This is not possible without using some type of a preprocessor like SASS or LESS.

Below answers are not answering the question, I've left them in case they might be useful to someone else.

~~You can put the quote " inside a var and then put all your vars inside the content respectively.~~

div {
  --text: 'success';
  --quo: '"';
}

div::before {
  content: var(--quo) var(--text) var(--quo);
}

<div></div>

CSS variables root pseudo class scope and changing values through javascript

Your hypothesis is correct: CSS custom properties specified with the :root-selector, are assigned to the html-element. And because of the inheritance, they are available for all the children of <html>.

From https://developer.mozilla.org/en-US/docs/Web/CSS/:root

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

From https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

Document.documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents).

CSS Variables (Custom Properties) in Pseudo-Element "Content" Property