[Solved] Vertical Timeline with CSS

by


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.

1

solved Vertical Timeline with CSS