Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Text Or Symbols Before And After The Divi Number Counter

Nelson Miller Profile Orange
In this tutorial I will show you how to add text or symbols before and after the Divi Number Counter module numbers.

▶️ Please watch the video above to get all the exciting details! 👆

1. Add A CSS Class To The Number Counter Module

The first step is to place the Divi Number Counter module in your layout and write your own number value. Each module will need to have a CSS class in order to add connect the code from step #2 to the module. Go to the Number Counter module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-number-counter-before” to the CSS Class input field. 

Since you probably need to add specific values to individual Number counter modules, you will need to have a unique CSS class selector for each module. You can also make additional custom CSS selectors like “pa-number-counter-after” and “pa-number-counter-both” since we will give you these snippets in step #2.

add css class to the Divi number counter to extend the values

2. Add Custom CSS Code Snippet To The Number Counter Module

The second step is to copy and paste whichever snippet you need below to your website. You can see there are three different snippets, one for adding text before the number, one for adding text after the number, and one for adding it both before and after the number. Choose whichever one you need.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Before

/*add content before number counter value*/
.pa-number-counter-before .percent-value:before {
	content: "XXX";
}

After

/*add content after number counter value*/
.pa-number-counter-after .percent-value:after {
	content: "XXX";
}

Both

/*add content before and after number counter value*/
.pa-number-counter-both .percent-value:before {
	content: "XXX";
}

.pa-number-counter-both .percent-value:after {
	content: "XXX";
}

Add Your Own Values

Obviously you need to replace the XX with your own values. Just write whatever text or symbol inside the quotation marks.

Add Space As Needed

If you need to add a space like in our example in the video of the “250 Clients” then just add a space inside the quotation marks at the beginning or end.

Adjust The Module Or Column Width

Because of the way we are adding this extra text, you may need to make the module width wider or adjust the column width for it to fit properly.

Make More Unique Snippets

If you need more than one module to have different text before the numbers, simply copy the snippets and make a unique CSS class selector for each module.

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

Comments By Others

  1. piciu

    Hello, it is working ok for me, but having trouble how to modify the “content”. The font face etc. is ok, but how to make i.e. square meters 2 is not wirking in the content, any advise?

    Reply
    • Hemant Gaba

      Hi Piciu!

      I’m not able to understand what you meant by square meters 2. Can you share some more details? However, you can add more properties to the code:

      .pa-number-counter-before .percent-value:before {
      content: “XXX”;
      font-family: Open Sans,Arial,sans-serif;
      }

      Hope it helps!

      Reply
  2. jeanette

    This didn’t work for me. I tried to add a plus sign but it is not showing.

    Reply
  3. Narcel

    Perfect solution!, but how do you get the number and the text inline?

    I mean i have for example a counter thats says 5 Jaar (dutch for years 🙂 ) and now bottom part of the 5 is lower then the J form Jaar?

    Regards,

    Marcel

    Reply
    • Hemant Gaba

      Hi Narcel!

      I have checked with the ‘Jaar’ after text and it seems to be working fine and inline with the number. Could you please share the URL of the page? It will help me to understand the issue better.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart