I have been working on creating a vertical timeline with icons embedded within it. I initially used this as a reference point. I was able to achieve the desired layout by adding extra spans inside the div.
However, the end result appears somewhat cluttered. I had to use a white background to conceal the line and incorporate extra spans to insert the images.
Could someone provide feedback on my code and assist me in inserting different images based on the id or class of the li?
Thank you.
In conclusion, my objectives are as follows:
1. Insert images based on the class or id of li
2. Eliminate any redundant span img tags to streamline the code.
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,iVBORw0KGgo...
...
<div class="history-tl-container">
...
<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">
...
</li>
</ul>
</div>