Creating Ordered or Unordered List as Vertical Timeline Using CSS

CSS3 has introduced lots of stunning and cool features to make user interface perfect. Creating Ordered List as Vertical Timeline or Unordered List as Vertical Timeline with CSS is very easy. Usually people are using unordered list as timeline because of using the different bullets or even SVGs instead of common bullets. But ordered list as vertical timeline can also be developed with CSS. Basically it’s a choice or requirement where we need to decide ‘What to use?’ and ‘How to use?’.

Recommended: MORE THAN 35 CSS3 ANIMATIONS WITH HTML5 TO LOOK YOUR WEB PAGE MORE STUNNING

Difference between Ordered and Unordered List

As we know an unordered list is a collection of related items that have no special sequence or order. This list is created by using HTML tag <ul>. Each element in the list is marked with a bullet. On the other hand, ordered list is a collection of those specific items which are having proper sequence or order. This list is created by using HTML tag <ol>. Each element in the list is marked with numbers, alphabets or any other sort of sequence.

HTML List As Vertical Timeline

To make the standard HTML list as Vertical timeline with <ol> or <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 color background. This creates the Line before each <li>. Furthermore, styling then positions this pseudo-element.

SVG Addition

The smart markup-saving addition of SVG into the :after pseudo-element is a cool concept in UX/UI. The original version included additional background properties to contain the size of the SVG and prevent it from repeating. However, notice that the SVG markup properly uses the focusable attribute to prevent it from being included on keyboard tab.

HTML And CSS For Creating Ordered List as Vertical Timeline

/*CSS*/
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: 0;
  top: 0;
  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;
  height: 15px;
  width: 15px;
}


<!--HTML-->
<ol>
  <li>Lorem Ipsum 1</li>
  <li>Lorem Ipsum 2</li>
  <li>Lorem Ipsum 3</li>
  <li>Lorem Ipsum 4</li>
  <li>Lorem Ipsum 5</li>
</ol>

HTML And CSS For Creating Unordered List as Vertical Timeline

/*CSS*/
ul {
  list-style-type: none;
}

li {
  position: relative;
  margin: 0;
  padding-bottom: 1em;
  padding-left: 20px;
}

li:before {
  content: '';
  background-color: #c00;
  position: absolute;
  bottom: 0;
  top: 0;
  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;
  height: 15px;
  width: 15px;
}


<!--HTML-->
<ul>
  <li>Lorem Ipsum 1</li>
  <li>Lorem Ipsum 2</li>
  <li>Lorem Ipsum 3</li>
  <li>Lorem Ipsum 4</li>
  <li>Lorem Ipsum 5</li>
</ul>

Note:

There’s no need to use any external CSS or JS resources, because it’s a pure CSS trick to make an ordered or unordered list as vertical timeline.

If you're looking for more cool and beautiful CSS Tricks than keep visiting my blog CSS3 Tricks. What do you think about this post? Share your experience let me know if you have any question. Please like, share and comments. Moreover, hire a Website Developer for Professional Website Development.