Как указать тип переменной css?

Я хочу показать значение элемента z-index в псевдоэлементе внутри него чистым css.

Для этого я решил использовать переменные CSS. Но проблема в том, что z-index — это число, а content — это строка. Как я могу привести значение?

В следующем примере: если p использует z-index: var(--z), он отображается поверх красного div с z-index: 8. Я хочу, чтобы p использовал z-index и одновременно показывал after. Как мне это сделать?

p {
  position: relative;
  z-index: var(--z);
  background: silver;
}

p:after {
  content: var(--z);
  color: red;
}

div {
  background: red;
  z-index: 8;
}

/* just some styling and positioning stuff bellow */

body {
  margin: 0;
}

p {
  margin: 1em .5em;
  padding: 0 .5em 0 3.5em;
  line-height: 2em;
}

div {
  position: absolute;
  top: .5em;
  left: 1em;
  height: 6em;
  width: 2em;
}
<p style="--z: 9">
  I have correct z-index, but have no :after
</p>

<p style="--z: '9'">
  I have no z-index, but have :after
</p>

<div></div>

PS: Тот же вопрос на русском.


css css-variables
person Qwertiy    schedule 01.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Нашел интересный лайфхак:

p:after {
  counter-reset: z var(--z);
  content: counter(z);
}

Весь код:

p {
  position: relative;
  z-index: var(--z);
  background: silver;
}

p:after {
  content: var(--z);
  color: red;
}

p.solution:after {
  counter-reset: z var(--z);
  content: counter(z);
  color: red;
}

div {
  background: red;
  z-index: 8;
}

/* just some styling and positioning stuff bellow */

body {
  margin: 0;
}

p {
  margin: 1em .5em;
  padding: 0 .5em 0 3.5em;
  line-height: 2em;
}

div {
  position: absolute;
  top: .5em;
  left: 1em;
  height: 9em;
  width: 2em;
}
<p style="--z: 9">
  I have correct z-index, but have no :after
</p>

<p style="--z: '9'">
  I have no z-index, but have :after
</p>

<p class="solution" style="--z: 9">
  I have both z-index and :after
</p>

<div></div>

person Qwertiy    schedule 01.03.2017
comment
Итак, решение состоит в том, чтобы использовать счетчик для отображения целого числа. Довольно умно! - person John Henry; 30.07.2021