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

You need quotation marks around the values of your custom properties.

document.documentElement.style.setProperty('--mouse-x', "'" + e.clientX + "'")
document.documentElement.style.setProperty('--mouse-y', "'" + e.clientY + "'")