title: CSS Variables (custom properties) in Pseudo-element "content" Property
body: <p>Example use (what I want)</p>
  
  <pre><code>div::after {
    content: var(--mouse-x) ' / ' var(--mouse-y);
  }
  </code></pre>
  
  <p>Test case showing it NOT working:</p>
  
  <p><a href="http://codepen.io/jasesmith/pen/KgbdpW/?editors=0100" rel="noreferrer">CodePen: CSS Variables in Pseudo Element's "content:" Property (a test case) by Jase Smith</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('mousemove', (e) =&gt; {
    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
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* what I want!! */
  div::after {
    content: var(--mouse-x, 245)" / " var(--mouse-y, 327);
  }
  
  /* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- test case: element with pseudo element --&gt;
  &lt;div&gt;&lt;/div&gt;
  
  &lt;!-- explanation (not test case) --&gt;
  &lt;main&gt;
    &lt;pre&gt;&lt;code&gt;div::after {
    content: var(--mouse-x) ' / ' var(--mouse-y);
  }&lt;/code&gt;&lt;/pre&gt;
    &lt;h1&gt;If this worked...&lt;/h1&gt;
    &lt;p&gt;
      We should see something like this: &lt;b&gt;&lt;span class="x"&gt;245&lt;/span&gt; / &lt;span class="y"&gt;327&lt;/span&gt;&lt;/b&gt; updating with the mousemove coordinates inside the pseudo &lt;i&gt;::after&lt;/i&gt; element for the div.
    &lt;/p&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>