How to create timeline using CSS?

Last Updated : 15 Sep, 2020

We can easily create a timeline using some basic HTML and CSS. HTML Code is used to create a basic structure of the timeline and CSS code is used to set the style.

HTML Code: In this section, we will create a structure of our timeline. Our structure will include four events.

Steps:

Create a div element with class main-container.
Inside our main container create four more div with class text-wrapper.
Inside each div with class text-wrapper include another div with class content and include one h3 and p tag within it.

Example: HTML code

html

<!DOCTYPE html>
<html>
<body>
 <!-- container which will contain our timeline -->
    <div class="main-container">
        <!-- event 1st of timeline -->
        <div class="text-wrapper left">
            <!-- all text content of timeline -->
            <div class="content">
                <h3>one</h3>
                <p>Some stuff</p>
            </div>
        </div>
        <!-- event 1st of timeline -->
        <div class="text-wrapper right">
            <!-- all text content of timeline -->
            <div class="content">
                <h3>two</h3>
                <p>Some stuff</p>
            </div>
        </div>
        <!-- event 1st of timeline -->
        <div class="text-wrapper left">
            <!-- all text content of timeline -->
            <div class="content">
                <h3>three</h3>
                <p>Some Stuff</p>
            </div>
        </div>
        <!-- event 1st of timeline -->
        <div class="text-wrapper right">
            <!-- all text content of timeline -->
            <div class="content">
                <h3>four</h3>
                <p>Some stuff</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS code: We will use CSS to give our timeline some structure and set position of events.

css

<style>
  .main-container{
    position: relative;
    width: 500px;
}
/*creating line for timeline*/
.main-container::after{
    content: '';
    position: absolute;
    width: 10px;
    background-color: #FFC0CB;
    top:0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
/*Adjusting box of all content*/
.text-wrapper{
    padding: 10px 40px;
    position: relative;
    width:51%;
    box-sizing: border-box;
    margin: 50px 0;
}
.text-wrapper::after{
    content: '';
    position: absolute;
    width: 30px;
    height: 25px;
    right: -10px;
    background-color:#FF69B4;
    top:15px;
    border-radius: 50%;
    z-index: 1;
}
/*for left events*/
.left{
    left: 0;
}
/*for right events*/
.right{
    left:50%;
}
.right::after{
    left:-10px;
}
/*content box colour padding and radius for circular corner*/
.content{
    padding: 15px 15px 15px 17px;
    background-color: #FFC0CB;
    border-radius: 4px;
}
/*setting text property of event heading*/
.content h3{
    text-transform: uppercase;
    font-size: 14px;
    color: #212121;
    letter-spacing:1px;
}
/*setting text property of event content*/
.content p{
    color: #616161;
    font-weight: 300;
    font-size: 18px;
    margin-top: 2px;
}
  </style>

Complete Code: