Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #500094


    There is already a post showing how to add circles to the animated numbers, but from the provided code, the circles are not round but oval if the number has more than to digits.

    How do I add circles that encapsulate both the description and the number even if it’s 3 or 4 digits?

    This is the site: (numbers are further down)

    Thank you



    Try with this:

    .avia-animated-number:after {
        content: "";
        border: 1px solid red;
        width: 100%;
        height: 200%;
        display: block;
        top: -50%;
        position: absolute;
        border-radius: 100px;

    You’ll need to increase the vertical spacing though.


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.