How to code with css an ol list with cycles and each ol li connected by vertical lines?

HTML & CSS
1

I need help on how to code an ordered list with the power of CSS. In this case, it’s a list with cycles (like number 1 inside a cycle), and a verticle line connecting each list item as shown in the image shown below.

As you’ll see from the code I have tried, the results give an ol list without the cycles but it does not number the list correctly inside the circle and partly the output is not precise.
Here’s the code I used:

.entry-content ol li::before {
    background: green;
    opacity: 0.5;
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    width: 10px;
    height: 100%;
	color:white !important;
	font-weight:900;
}
.entry-content ol li::after {
    border: 2px solid green;
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 20px;
}

I would like to have the CSS code which will precisely output it to be like this.
Untitled

2

Like this?

2 Likes
3

Or based on what I could see in your screenshot, I’d argue that you’re not really dealing with a list at all. You could use the same basic approach Archibald did using the css counter but with elements which make more sense to the content.

2 Likes
4

Thank you for your response. However, I’m using a WordPress theme and I wanted to paste the code you wrote to see how it works, the custom or “Additional CSS” section didn’t accept to save the changes.
it returns the error “Markup is not allowed in CSS.” I think there’s somewhere you can alter to rectify the problem again and I will appreciate it.

However, I have tried my best and I only experienced one issue - adding the verticle line to the list which connects ol li to another. Also, I would appreciate it if the verticle line ends when it touches the last ol li item without extending the line further below the list.

Here’s the code I have tried and it’s giving the results I wanted except the issue mentioned above:

.entry-content ol li {
    position: relative;
}
.entry-content ol li::before {
    background: green;
    opacity: 0.95;
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    width: 10px;
    height: 100%;
}
.entry-content ol li:after {
    position: absolute;
    left: -26px;
    top: 5px;
	background: black;
}
.entry-content ol li:after {
    position: absolute;
    left: -26px;
    top: 5px;
    }
.entry-content ol{
counter-reset: li;
list-style: decimal !important;
padding: 0;
margin-bottom: 1m;
	margin-left: 4.5em;
}





.entry-content ol ol{
margin: 0 0 0 1em;
}

.entry-content ol li{
position: relative;
display: block;
padding: .0004em .04em .014em .7019em;
margin: .15em 0;
color: #000;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: 1em;
transition: all .2s ease-in-out;
	margin-bottom: 1em !important;
	line-height: 1.4em;
}

.entry-content ol li:hover{
text-decoration:none;
}
.entry-content ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 30.6% !important;
background:#6da26d;
	height: 1.8em;
  width: 1.95em;
line-height: 1.24em;
border: .13em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}

Here’s the output:
Screenshot_11

5

In my CodePen change:
padding: 10px 0;
to:
padding-top: 10px;

Your screenshot in Post #1 shows the green line extending above the first circle. If you do not want that, instead of editing:
padding: 10px 0;
just delete it.

I have never used WordPress so do not know how to add custom code.

6

Without wishing to muddy the waters as you have two very good answers already I have used most of your css in the following codepen to create a demo.

The position of the numbers is at the vertical centre of the contents height but could be changed as required (with a corresponding change to the line start and finishes). This could have been catered for more easily with css variables for consistency but I didn’t want to change your css too much.

Of course I have had to guess at the html structure you have but the mechanics of the example should work for you. If you want a full answer then we’d need to see the html that you want us to work with. :slight_smile:

Here is another version that is just one ordered list in case that was your mark up.

Hope it helps :slight_smile:

4 Likes
8

I wanted to take a moment to express my sincere gratitude for your assistance with the CSS code problem. However, there’s an issue where the code works only for a single <ol><li> item in a post. When there is another <ol><li> at the bottom of the same post, it doesn’t reset to list the items from one; instead, it continues numbering from the previous list.
Here’s an output example from the code you wrote above.

Screenshot_16
Screenshot_16635×714 16.3 KB

I believe this can be corrected with a small adjustment in the code. I’m not entirely sure where the change needs to be made, but I’m confident it can be resolved.

9

If you’re using Paul’s styling and markup, just add a counter-reset to the OL selector

.entry-content > ol {
  counter-reset: li; /* add this line */
  list-style: decimal;
  padding: 0 0 0 2rem;
  margin: 0;
}

image
image485×765 16.1 KB

2 Likes
10

Hello! :smile: My sincere gratitude for providing the ultimate solution to the code problem I was facing. Your expertise and assistance have been invaluable, and the solution you provided works perfectly. :+1:

Thank you so much for your help. I truly appreciate it!

1 Like