Vertical Timeline with CSS - html

Question

I am trying to create a vertical timeline with some icons in it.
I used this as my starting point. I somehow managed to do it with extra span inside the div.
However it looks kind a messy. Because I use white background to hide the line, and use extra span to add the images.
Could you review my code and help me to add different images based on id or class of the li
Thanks.
Overall, I want to achieve
1. Add image based on class or id of li
2. Remove any unnecessary span img tags to clean the code.
My Version
Snippet :
body{
line-height:1.3em;
}
.history-tl-container{
font-family: "Roboto",sans-serif;
width:50%;
margin:auto;
display:block;
position:relative;
}
.history-tl-container ul.tl{
margin:20px 0;
padding:0;
display:inline-block;
}
span.check {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
left: -14px;
position: absolute;
padding: 20px;
}
.history-tl-container ul.tl li{
list-style: none;
margin:auto;
margin-left:200px;
min-height:50px;
border-left:1px solid #86D6FF;
padding:0 0 50px 30px;
position:relative;
}
.history-tl-container ul.tl li:first-child:before{
background: rgba(138, 223, 199, 1) none repeat scroll 0 0;
}
.history-tl-container ul.tl li:last-child{ border-left:0;}
.history-tl-container ul.tl li::before{
background: #FFFFFF none repeat scroll 0 0;
border: 2px solid rgba(138, 223, 199, 0.74);
border-radius: 500%;
content: " ";
height: 30px;
left: -18px;
position: absolute;
top: -5px;
transition: all 500ms ease-in-out 0s;
width: 30px;
}
/* .history-tl-container ul.tl li:hover::before{
border-color: #258CC7;
transition: all 1000ms ease-in-out;
} */
ul.tl li .item-title{
}
ul.tl li .item-detail{
color:rgba(0,0,0,0.5);
font-size:12px;
}
ul.tl li .timestamp{
color: #8D8D8D;
position: absolute;
width:100px;
left: -50%;
text-align: right;
font-size: 12px;
}
<div class="history-tl-container">
<ul class="tl">
<li class="tl-item" ng-repeat="item in retailer_history">
<span class="check"></span>
<div class="timestamp">
3rd March 2015<br> 7:00 PM
</div>
<div class="item-title">Start from Shire</div>
<div class="item-detail">Don't forget the ring</div>
</li>
<li class="tl-item" ng-repeat="item in retailer_history">
<div class="timestamp">
19th March 2015<br> 3:00 PM
</div>
<div class="item-title">Kill some Orcs</div>
<div class="item-detail">Don't enter the caves!!</div>
</li>
<li class="tl-item" ng-repeat="item in retailer_history">
<div class="timestamp">
1st June 2015<br> 7:00 PM
</div>
<div class="item-title">Throw that goddamn ring in the lava</div>
<div class="item-detail">Also, throw that Gollum too</div>
</li>
</ul>
</div>

Answer 1

You could use the ::after property.
.history-tl-container ul.tl li.achieved::after {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: -14px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
left: -14px;
}
Note, you must add "achieved" class to the li where the check should be displayed. Also, you might use this class for highlighting the green color.
.history-tl-container ul.tl li.achieved::before{
background: rgba(138, 223, 199, 1) none repeat scroll 0 0;
}
The span is alright, though, but if you use my solution, you should get rid of it.