A refreshingly simple (yet crafty) way to create a vertical timeline using a straight-up, semantic unordered list (<ul>
) from Peter Cooper.
ol {
list-style-type: none;
}
li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 6px;
width: 3px;
}
li:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
position: absolute;
left: 0;
top: 2px;
height: 12px;
width: 12px;
}
Peter got the idea after seeing it implemented on the BBC News website. That version went with an ordered list (<ol>
) element which makes sense if we’re dealing with a specific order of events. Peter’s take uses an unordered list which may be just as well.
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 smart, markup-saving addition of SVG into the :after
pseudo-element is courtesy of Saadat. The original version included additional background properties to contain the size of the SVG and prevent it from repeating, but I didn’t find them totally necessary, at least in this context. However, notice that the SVG markup properly uses the focusable
attribute to prevent it from being included on keyboard tab. Nice moves! 👏
Here’s the result:
See the Pen
Unordered List as Continuous Vertical Timeline by Geoff Graham (@geoffgraham)
on CodePen.
I’m having a hard time envisioning a timeline without the order being important so I feel an
<ol>
makes more semantic sense.I did a timeline a while ago for an annual report along similar lines: https://codepen.io/bemdesign/pen/wMmZYo
Seconded. An ordered list makes more sense for a timeline. The idea is good though.
That was my gut feeling too. Went ahead and changed that up.
I still prefer to use unordered list in my experimental week calendar
http://www.netools.it/web/calendar/week/
I know it’s silly, but add maybe something like 16x16px for the red circle, and a left of 7px for the vertical line, just to be centered, because it doesn’t seem centered, kinda bothers me in a weird way, haha.
Ha! I feel ya there. Tweaked it up a smidge to even things out.
And what about using a
list-type-image
and aborder-left
?Interesting! I bet it could also be done with the default bullet style, saving the need for one of the pseudos.
If you swap the ‘after’ and ‘before’ statements, you get a solution for multi-line content.
why are u loading an svg for the dot?! wouldnt it be better to use only css:
li:after {
background-color: red;
border-radius: 50%;
content: ”;
height: 8px;
left: 3px;
position: absolute;
top: 5px;
width: 8px;
}
How can I change the color of the dot on a timeline?
Awesome write up