How to create timeline in css

CssHow-ToBeginner · 4 min read

How to Create a Timeline in CSS: Simple Step-by-Step Guide

To create a timeline in CSS, use a vertical line with positioned timeline items using flexbox or grid. Style each event with circles and text aligned on either side using position and pseudo-elements for the line and markers.

📐

Syntax

A basic timeline uses a container with a vertical line created by a ::before pseudo-element. Each timeline event is a block with a circle marker and text. Use position: relative on events and absolute on markers to place them correctly.

.timeline: main container holding all events.
::before: draws the vertical line.
.timeline-event: each event block.
.marker: circle representing the event point.

css

.timeline {
  position: relative;
  margin: 20px 0;
  padding-left: 40px;
  border-left: 2px solid #ccc;
}
.timeline-event {
  position: relative;
  margin-bottom: 20px;
}
.timeline-event .marker {
  position: absolute;
  left: -12px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  border: 3px solid white;
}
.timeline-event .content {
  padding-left: 10px;
}

Output

A vertical line with circular markers aligned on the left and event text next to each marker.

💻

Example

This example shows a vertical timeline with three events. Each event has a blue circle marker on the left and descriptive text on the right. The vertical line runs through all events.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Timeline Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .timeline {
    position: relative;
    margin: 20px 0;
    padding-left: 40px;
    border-left: 3px solid #3498db;
  }
  .timeline-event {
    position: relative;
    margin-bottom: 30px;
  }
  .timeline-event .marker {
    position: absolute;
    left: -15px;
    top: 0;
    width: 25px;
    height: 25px;
    background: #3498db;
    border-radius: 50%;
    border: 4px solid white;
  }
  .timeline-event .content {
    padding-left: 10px;
  }
  .timeline-event .content h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #333;
  }
  .timeline-event .content p {
    margin: 0;
    color: #666;
  }
</style>
</head>
<body>
  <section class="timeline" aria-label="Project timeline">
    <article class="timeline-event">
      <div class="marker" aria-hidden="true"></div>
      <div class="content">
        <h3>Project Start</h3>
        <p>Initial planning and setup of the project.</p>
      </div>
    </article>
    <article class="timeline-event">
      <div class="marker" aria-hidden="true"></div>
      <div class="content">
        <h3>Development Phase</h3>
        <p>Writing code and building features.</p>
      </div>
    </article>
    <article class="timeline-event">
      <div class="marker" aria-hidden="true"></div>
      <div class="content">
        <h3>Launch</h3>
        <p>Project release and deployment.</p>
      </div>
    </article>
  </section>
</body>
</html>

Output

A vertical blue line on the left side with three blue circular markers aligned vertically. Next to each marker is a heading and paragraph describing each timeline event.

⚠️

Common Pitfalls

Common mistakes when creating timelines in CSS include:

Not using position: relative on timeline events, causing markers to misalign.
Forgetting to add enough left padding on the container, so text overlaps the line.
Using fixed widths without responsive design, making the timeline break on small screens.
Not using semantic HTML elements like <article> or <section> for accessibility.

css

/* Wrong: Missing relative positioning on event */
.timeline-event {
  margin-bottom: 20px;
}
/* Right: Add relative positioning */
.timeline-event {
  position: relative;
  margin-bottom: 20px;
}

📊

Quick Reference

Tips for creating CSS timelines:

Use border-left on the container for the vertical line.
Use position: absolute for markers and position: relative on events.
Use semantic HTML elements for better accessibility.
Ensure enough padding so text does not overlap the line.
Make the timeline responsive by using relative units like rem and flexible widths.

✅

Key Takeaways

Use a vertical line with positioned circle markers to create a timeline in CSS.

Apply relative positioning on timeline events and absolute positioning on markers for correct alignment.

Add enough left padding on the container to prevent text overlapping the timeline line.

Use semantic HTML elements like

and

for accessibility.

Test responsiveness by using relative units and flexible layouts.