I am creating a horizontal timeline using CSS. I tried below code but I am not getting my expected output. I think there is some issue with position or odd even css.Also, I am getting the horizontal scroll in my code.
Please check my code and assist me where I added the wrong css.
Would you help me out with this issue?
.i_timeliner ul {
margin: 0;
padding: 0;
list-style: none;
}
.i_timeliner li {
float: left;
width: 20%;
position: relative;
display: inline-block;
list-style-type: none;
height: 3px;
background: #fff;
}
.i_timeliner li:before {
width: 50px;
height: 50px;
line-height: 50px;
border: 3px solid #000;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: #000;
letter-spacing: 0px;
}
.i_timeliner li:after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background-color: #000;
top: 25px;
left: 0%;
z-index: -1;
}
.i_timeliner_box {
border: 1px solid #ccc;
margin: 20px;
min-height: 140px;
box-sizing: border-box;
padding: 0 25px;
}
.i_timeliner ul li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
}
.i_timeliner ul li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.i_timeliner ul li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
.i_timeliner ul li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
.i_timeliner ul li:nth-child(even) div {
top: calc(100% + 16px);
}
.i_timeliner ul li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
<div class="i_timeliner">
<ul>
<li>
<div class="i_timeliner_box">
<h2>1</h2>
<p></p>
</div>
</li>
<li>
<div class="i_timeliner_box">
<h2>2</h2>
<p></p>
</div>
</li>
<li>
<div class="i_timeliner_box">
<h2>3</h2>
<p></p>
</div>
</li>
<li>
<div class="i_timeliner_box">
<h2>4</h2>
<p></p>
</div>
</li>
<li>
<div class="i_timeliner_box">
<h2>5</h2>
<p></p>
</div>
</li>
</ul>
</div>
See Question&Answers more detail:os