I was surfing for some recipes the other day and happened across what I thought was a nicely styled ordered list that used connecting dots to add a nifty touch to the display. I dug into their source code to see how it was done and how it could be repeated easily and came up with these solutions. The dots/lines will automatically stretch to the height of each list item.

First, here’s what it looks like so we know what we’re talking about:

The HTML Code

This is one way to do it, using a wrapping div.

	
1
Adipiscing elementum, turpis etiam ut porttitor augue arcu, est mid vut odio dignissim amet habitasse platea ac turpis lacus dolor, nunc, nec mid. Dictumst nec proin parturient sed dapibus urna! Tempor vel nec tincidunt sed magna, phasellus vel porta. Nisi dapibus ac ultrices cursus tincidunt hac eu et, diam odio, amet nec, vut elementum,
	
2Adipiscing elementum, turpis etiam ut porttitor augue arcu, est mid vut odio dignissim amet habitasse platea ac turpis lacus dolor, nunc, nec mid. Dictumst nec proin parturient sed dapibus urna! Tempor vel nec tincidunt sed magna, phasellus vel porta. Nisi dapibus ac ultrices cursus tincidunt hac eu et, diam odio, amet nec, vut elementum, Adipiscing elementum, turpis etiam ut porttitor augue arcu, est mid vut odio dignissim amet habitasse platea ac turpis lacus dolor, nunc, nec mid. Dictumst nec proin parturient sed dapibus urna! Tempor vel nec tincidunt sed magna, phasellus vel porta. Nisi dapibus ac ultrices cursus tincidunt hac eu et, diam odio, amet nec, vut elementum,
	
3Adipiscing elementum, turpis etiam ut porttitor augue arcu, est mid vut odio dignissim 

The CSS Code

This should be placed in your child theme stylesheet or similar location in order to make it a ‘global’ effect for all OL’s.

/*---------------- DOTS LIST -----------------------------------------*/
.dots-list {
width: 100%;
}
.dots-list ol {
    padding-left: 50px;
    position: relative;
    margin-bottom: 20px;
    list-style: none !important;
}

.dots-list ol li {
position: relative;
margin-top: 0em;
margin-bottom: 20px;
}

.dots-list ol li .number_divider {
    position: absolute;
    left: -50px;
    font-weight: 800;
    font-size: 2em;
top: -5px;
}

.dots-list ol li:before {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 2px;
    top: 1px;
    bottom: -21px;
    left: -24px;
}

.dots-list ol li:after {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: 1px;
    left: -31px;
}

.dots-list ol li:last-child:before {
content: "";
background: #ffffff;
}

As you can see, we’ve instructed the OL’s within the div class “.dots-list” to create the dots and connecting lines as backgrounds. You could also skip the use of the actual div wrapper and, in Divi, assign the class name to the module you’re inserting the list into (typically it would be text module or possibly a blurb). I showed it this way so that anyone not using Divi could still apply the CSS directly with the use of the wrapping div.

Using It For Uniformed Lists

To adapt this to a regular UL all you need to do is remove the ‘span’ tags and the numbers from the HTML. Since the OL list CSS has told the numbers to not display ( list-style: none; removes the numbers ) we have manually added them back in using the ‘span’ tag which then allows the CSS to format their location and style. The other change necessary is in the CSS code where you reference OL, you would need to change that to UL. Like this:

/*---------------- DOTS LIST -----------------------------------------*/
.dots-list {
width: 100%;
}
.dots-list ul {
    padding-left: 50px;
    position: relative;
    margin-bottom: 20px;
    list-style: none !important;
}

.dots-list ul li {
position: relative;
margin-top: 0em;
margin-bottom: 20px;
}

.dots-list ul li .number_divider {
    position: absolute;
    left: -50px;
    font-weight: 800;
    font-size: 2em;
top: -5px;
}

.dots-list ul li:before {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 2px;
    top: 1px;
    bottom: -21px;
    left: -24px;
}

.dots-list ul li:after {
    content: "";
    background: #8dbeb2;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: 1px;
    left: -31px;
}

.dots-list ul li:last-child:before {
content: "";
background: #ffffff;
}

Have Fun!