can i get the same properties on a singlediv?

The value need to be inside the element and your code can be simplified like below:

#twitter,
#instagram,
#facebook,
#youtube{
  animation: counter 3.9s  ease-in-out;
  counter-reset: num var(--num);
}

#twitter::before,
#instagram::before,
#facebook::before,
#youtube::before{
  content: counter(num);
}

#twitter { --num:984; }
#instagram { --num:402; }
#facebook { --num:254; }
#youtube { --num:610; }

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes counter {
  from {
    --num: 0;
  }
}
<div id="twitter" ></div>
<div id="instagram" ></div>
<div id="facebook" ></div>
<div id="youtube" ></div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top