<div></div>
@property --num {
syntax: "<integer>";
initial-value: 3 * 26 * 26 + 19 * 26 + 19;
inherits: false;
}
div {
transition: --num 0.25s;
counter-set: num var(--num);
font: 800 40px system-ui;
padding: 2rem;
}
div::after {
content: counter(num, lower-alpha);
}
div:hover {
--num: #{25 * 26 * 26 + 5 * 26 + 19};
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.