CSS Only Semantic Timeline

Preview:

Description:

A semantic SEO-friendly vertical timeline built on top of HTML lists and CSS.

How to use it:

1. Add your events as list items to the timeline.

<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 1</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 2</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 3</p>
    </div>
  </li>
  ...
</ul>

2. Convert the HTML list into a vertical timeline.

.timeline {
  position: relative;
  padding: 1rem 2rem;
  border-radius: 12px;
}
.timeline .timeline-item {
  position: relative;
  left: -10px;
  list-style: none;
  border-left: 1px solid #fff;
  margin-left: 10px;
  padding: 0 0 1.5rem 1.5rem;
}
.timeline .timeline-item .timeline-card {
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.timeline .timeline-item .timeline-card h4 {
  margin: 10px auto;
  color: #333;
}
.timeline .timeline-item .timeline-card:hover {
  box-shadow: 0 5px 5px rgba(23, 20, 29, 0.15);
  transform: translateX(-5px);
}
.timeline .timeline-item:last-child {
  padding-bottom: 0;
}
.timeline .timeline-item:before {
  content: "";
  width: 15px;
  height: 15px;
  background: white;
  border: 2px solid #278472;
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: 0px;
}