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 inherited1 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).
Related Topics
How to Check for Duplicate CSS Rules
Box-Shadow and Border-Radius Bug in Chrome
Scale HTML Table Before Printing Using CSS
How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability
Is There Any IE8 Only CSS Hack
Pixel Density, Retina Display and Font-Size in CSS
Calculating Viewport Height on Chrome Android with CSS
Responsive Images Positioned Over Image
@Font-Face Declarations Don't Work in Android 4.3 Internet Browser
Css3 Radial Gradients with Rgba()
Vertical Alignment of Text in Container: Webkit VS Firefox
How to Draw Realistic Smooth Slit Shadow with Pure CSS3
Why Does Grid-Gap Cause an Overflow