Unordered list as a timeline with CSS, BBC News-Style

Unordered list as a timeline with CSS, BBC News-Style

When there are live events, BBC News often runs a 'timeline' style list against stories. For example:

BBC News Style List

I was intrigued to work out how they'd got the bullet points of the list items to be dynamically joined by a line.

Long story short, it's a standard HTML list (the BBC uses <ol> but I went with <ul>) where each list item ( <li> ) has a :before pseudo-element that's empty content-wise but is marked as being 2 pixels wide with a red background color. This creates the 'line' before each <li>. Further styling then positions this pseudo-element/line.

The key part of the CSS is for the pseudo-element:
li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0;
top: 0;
left: 6px;
width: 3px;

}

You also need to make sure that the list item itself uses relative positioning so that the position: absolute on the pseudo-element doesn't base itself on the page but on the list item itself:
     li {
position:relative;
margin: 0;
padding-left: 20px;
padding-bottom: 1em;

}

The bullet-points aren't the standard HTML bullet-points but are just circles drawn using inline SVG. You could in theory use any shape (stars, squares, whatever) or maybe even something like an emoji, but I just copied the circle approach that the BBC uses.

Rather than bore you to tears with a technical explanation of how it works, I've boiled it down to the simplest code example I could come up with, added plentiful comments, and put it on CodePen for you to fiddle around with.
Youtube Video Link:
Click here to watch video.....

Code download link is given below:

Click here to download code....