JSFiddle - React, Tailwind, and code Playground

by Eliseo D'Annunzio

HTML

<div id="test_add"></div>
		<div id="test_sub"></div>
		<div id="test_mul"></div>
		<div id="test_div"></div>

CSS

:root {
  --a: 51;
  --b: 32;
}
#test_add:before {
    color: red;
  counter-reset: add_res calc(var(--a) + var(--b));
  content: counter(add_res);
}
#test_sub:before {
    color: blue;
  counter-reset: sub_res calc(var(--a) - var(--b));
  content: counter(sub_res);
}
#test_mul:before {
    color: orange;
  counter-reset: mul_res calc(var(--a) * var(--b));
  content: counter(mul_res);
}
#test_div:before {
    color: green;
  counter-reset: div_res calc(var(--a) / var(--b));
  content: counter(div_res);
}