Looking to customize the Divi Number Counter module by replacing the default percentage (%) sign with a dollar ($) sign? This simple yet effective CSS trick will enhance your site's financial displays or pricing sections. Follow this step-by-step tutorial to make the change effortlessly. If you're new to adding custom CSS in Divi, consider reading our introductory guide first.

To convert the percentage sign to a dollar sign in your Divi Number Counter module, here's what you need to do:

  1. Add a Number Counter Module to your page.
  2. In the Number Counter Settings, navigate to Content > Elements and toggle the Percentage Sign to OFF.
  3. Go to Advanced > CSS ID & Classes within the Number Counter Settings and assign a CSS Class named dollar.
  4. Add the following custom CSS to the Divi Theme options custom CSS box, your page settings Custom CSS box, or your style.css file in your child theme:

.dollar .percent-value:before {

    content: '$';

}{codeBox}

This CSS snippet prepends a dollar sign before the number in the Divi Number Counter module, effectively replacing the default percentage symbol. By following these steps, you can customize your counter to better fit financial figures or pricing information, making your Divi site more tailored to your content needs.