Code by Day | Explore By Weekend

How To Add Automatic Dot Leaders Between Text In Divi Tutorial By Pee Aye Creative

How To Add Automatic Dotted Leader Lines Between Text In Divi

In this tutorial I will show you how to add automatic dotted leader lines between text in Divi, perfect for a restaurant menu.
Categories: Divi CSS Tutorials

Create Beautiful Restaurant Menus

I love doing tutorials about Divi, but also CSS and jQuery. This tutorial is about a CSS trick to add leading dotted lines and create a list of things with label text on the left and a value text on the right. The most obvious use case for this is a restaurant menu, but there are other things you could o with it as well. In this tutorial, I will show you how to add automatic dotted leader lines between text in Divi.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

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!

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.

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!

7

Last updated Aug 2, 2022 @ 1:47 am

That's it!

I hope you have enjoyed learning How To Add Automatic Dotted Leader Lines Between Text In Divi. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

î‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart