Unordered List as a Timeline

Avatar of Geoff Graham
Geoff Graham on (Updated on )

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.

Source