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

Question

Example use (what I want)

div::after {
  content: var(--mouse-x) \' / \' var(--mouse-y);
}

Test case showing it NOT working:

CodePe

Answer 1

Edit for clarity: CSS custom properties with a numerical value 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);
}

The variable is .

.coordinates:before {
    counter-reset: x var(--x) y var(--y);
    content: 'The coordinates are (' counter(x) ', ' counter(y) ').';
}

---

Original Answer

Got it to work using a hack involving CSS Counters. Enjoy.

div::after {
  counter-reset: mouse-x var(--mouse-x, 245) mouse-y var(--mouse-y, 245);
  content: counter(mouse-x) " / " counter(mouse-y);
}

Full code in action:

document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
  
  // output for explanation text
  document.querySelector('.x').innerHTML = e.clientX
  document.querySelector('.y').innerHTML = e.clientY
})

/* what I want!! */
div::after {
  counter-reset: mouse-x var(--mouse-x, 245) mouse-y var(--mouse-y, 245);
  content: counter(mouse-x) " / " counter(mouse-y);
}

/* setup and presentation styles */
div::before {
  content: 'mouse position:';
}
div {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
  width: 10em;
  height: 10em;
  background: #ff3b80;
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  will-change: transform;
}
body {
  margin: 2em;
  font-family: sans-serif;
}
p {
  max-width: 50%;
  min-width: 25em;
}

  
div::after {
  content: var(--mouse-x) ' / ' var(--mouse-y);
}
  
If this worked...
  

    We should see something like this: 245 / 327 updating with the mousemove coordinates inside the pseudo ::after element for the div.