BlueOwlCreative » Topic: Add a plus sign to animated counter number

Add a plus sign to animated counter number

anoriega — Mon, 28 Aug 2017 17:12:41 +0000

Is there any way I can add a plus sign (+) next to the number I input in my animated counter? I am putting stats for my company and I would like it to display as “500+ Customers.”

Reply To: Add a plus sign to animated counter number

BlueOwl — Tue, 29 Aug 2017 08:12:29 +0000

Hi there,

Sure you can with some simple custom CSS, add this to your Page settings CSS (the cog icon):

.my_counter .counter:after {
    content: "+";
    font-size: 45px;
}

then add the “my_counter” as a custom CSS class for your Animated counter element.

Reply To: Add a plus sign to animated counter number

anoriega — Wed, 30 Aug 2017 21:05:25 +0000

Thank you for getting back to me. I’m still having an issue. When I do the above, the plus sign is added after my number value and counter title. If I change the CSS to .my_counter .counter:before then it adds the plus sign before my number value (i.e. +500). What I would ideally want is for the plus sign to show like so: 500+ Customers Worldwide.

Reply To: Add a plus sign to animated counter number

BlueOwl — Thu, 31 Aug 2017 07:34:41 +0000

You mean you want the “Customers Worldwide” wording to be on the same line?
Try replacing this:

content: "+";

with this:

content: "+ Customers Worldwide";

Reply To: Add a plus sign to animated counter number

anoriega — Thu, 31 Aug 2017 14:05:33 +0000

No, what I mean is that in the Animated Counter Settings, you have an option to add a Title Below the Counter. This is where I wrote out Customers Worldwide. Then, you input the Number you want your counter to display. This is where I wrote out 500. On a page, this will look like 500 and then underneath the optional title I wrote out- Customers Worldwide. If I add in the CSS you outlined above, the plus sign displays after the title so it shows up like so: 500, underneath it Customers Worldwide, underneath this the plus sign. Not what I’m looking for. I don’t want the Customers Worldwide to be on the same line since it’s already an optional title that shows up underneath my number. I want the plus sign right after the number 500 so it looks like 500+ when you load the page.

Reply To: Add a plus sign to animated counter number

anoriega — Thu, 31 Aug 2017 14:30:19 +0000

Nevermind I figured it out! Thank you.

Reply To: Add a plus sign to animated counter number

BlueOwl — Fri, 01 Sep 2017 07:26:39 +0000

Well, isn’t that the first scenario that I showed you?
Glad to hear you got it.

Reply To: Add a plus sign to animated counter number

anoriega — Thu, 14 Sep 2017 21:01:40 +0000

In the first scenario, the plus sign appears after the counter “title.” I removed the title from counter and used a heading element below instead. It worked perfectly. Thanks for your help!