How to display the timeline using CSS

Question

I am creating a timeline but it's not displaying my design output. I have to display the first child after the image and next child before image with a full underline. I tried but my underline not displaying proper even image is not display the right way

Would you help me out in this? I need a output like this.

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
 /* background: #fff;*/
 border-right: 2px solid #ff0000;
}
 
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: inherit;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even){
  width:50%;
  float:left;
  clear:right;
  text-align:right;
  position:relative;
}
.timeline ul li:nth-child(even){
  width:50%;
  float:right;
  clear:left;
  text-align:left;
  position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}

<div class="timeline">
                  <ul>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                  </ul>
            </div>

Answer 1

There are a couple of thing missing or wrong with your code.

• You applied the border on both the divs on the same side. I fixed this by giving them both a different border.

• To make sure the border was included within the size of the element I used box-sizing: border-box;.

• As with some of the other answers they became jagged so I applied a width to the element of 50% - half the border size i.e. width: calc(50% - 1px). This should always result in a straight line.

• You never made sure the actual :before would be displayed. So i applied the same rules for the :after to the :before.

• Gave the li a small padding so it wouldn't be stuck to the border, resulting in some space for the image.

The code below should work the way you intended. As for margins and padding, you are ofcourse free to adjust them to your needs.

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: calc(50% + 1px);
  margin: 0 auto;
  padding-top: 50px;
  box-sizing: border-box;
}
 
.timeline ul li::after, .timeline ul li::before {
  position: absolute;
  transform: translateX(-50%);
  width: 24px;
  height: 20px;
  content: '';
}
.timeline ul li:nth-child(odd){
  float:left;
  clear:right;
  text-align:right;
  border-right: 2px solid #ff0000;
  padding-right: 2em;
}
.timeline ul li:nth-child(even){
  float:right;
  clear:left;
  text-align:left;
  border-left: 2px solid #ff0000;
  padding-left: 2em;
}
.timeline ul li:nth-child(odd):after{
  background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
  background-size: 100% 100%;
  right: -5px;
}
.timeline ul li:nth-child(even):before{
  background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
  background-size: 100% 100%;
  left: 20px;
}

<div class="timeline">
                  <ul>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                        <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
                  </ul>
            </div>

Answer 2

You can change a part of CSS as below: Jsfiddle

.timeline ul li:nth-child(1), .timeline ul li:nth-child(2n+1){
    width: 50%;
    float: left;
    clear: right;
    text-align: right;
    position: relative;
    border-right: 5px inset black; //border
    left: -5px; //alignment
 }

 .timeline ul li:nth-child(2n){
    width: 50%;
    float: right;
    clear: left;
    text-align: left;
    position: relative;
    border-left: 5px inset black; //border
 }

Answer 3

This is not perfect or dynamic but it will get you on the right path. use nth-child(odd/even) to select every second row

li:nth-child(odd) {    
float: left;
border-right: thick solid #ff0000;

margin: 0px;
padding-right: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 254px;
background-position-y: 18px;
}
li:nth-child(even) {    
float: right;
border-left: thick solid #ff0000;
margin-right: 186px;
         
padding-left: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 18px;    
}
ul{
list-style: none;
}
li{
padding: 20px 0 0 0;
}
div{
width: 777px;
}
img{
width: 20px;
}

<div class="timeline">
      <ul>                  
         <li>
             <a href="">Lorem ipsum dolor sit amet, consectetu</a>                         
         </li>  
            
         <li>                         
             <a href="">Lorem ipsum dolor sit amet, consectetu</a>   
         </li>    
             
         <li>
             <a href="">Lorem ipsum dolor sit amet, consectetu</a>                           
         </li>
            
         <li>                        
             <a href="">Lorem ipsum dolor sit amet, consectetu</a>                         
         </li>   
         
         <li>                         
             <a href="">Lorem ipsum dolor sit amet, consectetu</a>   
         </li>
     </ul>
</div>

Answer 4

here is my solution :

jsFiddle

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
 /* background: #fff;*/
}

.timeline ul li:nth-child(odd) {
 border-right: 2px solid #ff0000;
}

.timeline ul li:nth-child(even) {
 border-left: 2px solid #ff0000;
}
 
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: inherit;
}
.timeline ul li:nth-child(odd){
  width:50%;
  float:left;
  clear:right;
  text-align:right;
  position:relative;
}
.timeline ul li:nth-child(even){
  width:49.7%;
  float:right;
  clear:left;
  text-align:left;
  position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(odd):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}

<div class="timeline">
  <ul>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
    <li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
  </ul>
</div>