Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Automatic Dotted Leader Lines Between Text In Divi

Nelson Miller Profile Orange
In this tutorial I will show you how to add automatic dotted leader lines between text in Divi, perfect for a restaurant menu.

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

1. Set Up The List Of Items

The first step in the tutorial is to set up the list of items by adding the label and value text. The way this will work, you need to add the items as an unordered list, or bullet list. For each bullet list item, add the label text which will be on the left and also the value text which will be on the right. The important part now is adding span tags to each of those. It’s quite easy to do, and once you do one you can copy and paste it for others.

creating dot leaders in Divi with a bullet list

The important part now is adding span tags to each of those. It’s quite easy to do, and once you do one you can copy and paste it for others. To do this, switch to the “Text” tab with is actually the “HTML” tab. This allows you to see the HTML, which is what we need to edit. Look inside the <li> (list item) and you will see your text. Add <span> before and </span> after your label text and do the same for your value text.

use the HTML text tab in Divi to edit html of dot leaders

If you need any help with this, please watch the video. We also include an HTML version of the list item you can copy below.

HTML Of Each List Item

<li><span>LABEL</span><span>VALUE</span></li>

2. Add A Custom CSS Class To The Divi Module

There is one more step to do while inside that “Text” tab. You need to have a CSS class so that the code snippet we add in step #3 will connect with the bullet list you just added in step #1. We could have made this work with a slightly different process by adding the class to the main module, but this approach allows you to use this tutorial within any module by targeting the bullet list instead of the module.

Go to the <ul> (unordered list) at the beginning of the code and add the CSS class “pa-dot-leaders” inside the brackets. Here is the exact HTML of the ul:

HTML Of Unorderd List

<ul class="pa-dot-leaders">
add a custom CSS class to an unorderd list in Divi to create dot leaders

3. Add The Custom CSS Code Snippet

Now it’s time to do the real trick here, adding the code that creates the leading dotted ones and spreads the label and value text to each side. The code is a little complicated, so sorry but I won’t take much time to explain it this time. Just copy and paste!

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

ul.pa-dot-leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.pa-dot-leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
}
ul.pa-dot-leaders  span:first-child {
    padding-right: 0.33em;
    background: white}
ul.pa-dot-leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white}

Be sure to watch the video to see this all in action, as this tutorial is a bit more complicated than usual. Let me know in the comments if you enjoyed this!

Categories: Divi CSS 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

11 Comments

  1. Richard Bloom

    Thank you very much Nelson, I’ve always wanted to know how to do this. I’ll try it.

    Reply
  2. Ruth Chege

    Thanks a lot for sharing this!

    Reply
  3. Jean Werk

    Hi Nelson, this looks good for sighted users but it sounds bad (pardon the pun) for blind users because screen readers will say “dot dot dot…”.
    To fix this, add the dots to an extra with aria-hidden=”true” then screen readers will ignore the dots.

    I’ve slightly updated your code in this CodePen: https://codepen.io/jeanwerk/pen/yLjyKmd

    Reply
  4. Anshul Badjatya

    Hey Nelson, I have tried the exact same method as you explained. But my dots are adjusting according to space. it is taking full width. Can you please check and let me know what’s wrong I am doing.

    Reply
  5. Knox Bronson

    Hi-

    Thank you for your tutorial. I had to change it a little, so I could have a description under the LABEL & PRICE line. Now the dots go all the way under the words and price.
    This is what the html looks like now:

    HAIRCUT$115

    Shampoo, conditioner, and blow dry

    SINGLE PALETTE$115

    Solid all-over color

    I didn’t change the css, except to say background: “none”

    How can I fix please?

    Gonna try to link to a screenshot, because it’s on a godaddy staging server (not MY choice!)

    Image is in website link

    Thank you!

    Reply
  6. Hemant Gaba

    Hi Knox!

    Sorry, I’m not able to see the screenshot link. I need to see the HTML in order to filter out the issue. Can you please share the URL of the page to investigate further?

    Reply
  7. Lindy Bostrom

    Hi Nelson – thanks for this – it’s just what I needed. I’m having trouble though with the dots overlapping my text, and on tablet and mobile, there are dots appearing before the “LABEL.” Also on mobile the “VALUE” is not fitting so bumping down a line. Can you help me fix this? Here’s the page url: https://dev.podstreamstudios.com/rates/. I made screenshots but don’t see where to upload them.

    Reply
    • Hemant Gaba

      Hi Lindy!

      The background color is needed in the first span tag. Please add the following code for the first span child instead of the above one:

      ul.pa-dot-leaders span:first-child {
      padding-right: 0.33em;
      background: rgba(220,217,244,0.75);
      }

      Hope it helps!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart