Использование переменных CSS (пользовательские свойства) в свойствах "content:" псевдоэлемента:

Пример использования (что мне нужно)

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

Тестовый пример, показывающий, что он НЕ работает:

CodePen: Переменные CSS в псевдоэлементе "content:" Свойство (тестовый пример) Jase Smith

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 {
  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;
}

<!-- test case: element with pseudo element -->
<div></div>

<!-- explanation (not test case) -->
<main>
  <pre><code>div::after {
  content: var(--mouse-x) ' / ' var(--mouse-y);
}</code></pre>
  <h1>If this worked...</h1>
  <p>
    We should see something like this: <b><span class="x">245</span> / <span class="y">327</span></b> updating with the mousemove coordinates inside the pseudo <i>::after</i> element for the div.
  </p>
</main>

Ответы

Ответ 1

Редактирование для ясности: пользовательские свойства CSS с числовым значением могут отображаться в свойствах content псевдоэлемента через счетчик CSS.

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

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

Ответ 2

Если вы измените свой JS на:

document.documentElement.style.setProperty('--mouse-x', '\'${e.clientX}\'') 
document.documentElement.style.setProperty('--mouse-y', '\'${e.clientY}\'')

Он будет работать, но вам придется использовать другую переменную для использования с calc, так как это преобразует ее в строку с литеральными кавычками, в которой должен работать контент. Я подумал, что я опубликую это, потому что я и мой коллега сейчас задавались вопросом об этом, и я всегда стараюсь найти подходящее решение, которое работает.

Ответ 3

Вам нужны кавычки вокруг значений ваших настраиваемых свойств.

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

Ответ 4

Я не совсем уверен, правильно ли понял ваш вопрос, но я думаю, что здесь решение...

Вы можете определить пользовательский атрибут для вашего элемента <div>.

<div data-position></div>

Затем назначьте позицию в этом атрибуте с помощью javascript:

  var position = e.clientX + " " + e.clientY
  document.querySelector("div").setAttribute('data-position', position)

Наконец, используйте функцию attr() CSS в свойстве content вашего псевдоэлемента.

div::after {
  content: attr(data-position);
}

И вуаля.

Фрагмент кода:

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

/* what I want!! */

div::after {
  content: attr(data-position);
}
/* 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 data-position></div>
<span class="x"></span>/<span class="y"></span>