How to add left border with image(s) dynamically - asp.net-mvc

Question

I need this type of page
Which shows achievements of a particular individual on yearly basis, as you can see it is all dynamic, if there are tho achievements, two rows are shown and so on. I am able to produce this, .
But I am not able to get these dots (or circles). I tried with left-border border-image and so on, but it would all break, because it is all dynamic, and any year can have as little as one achievement (or none, in that case it won't show up) or as many as tens (we don't have any max limit on this, but it can be many). So, if I do something with a image, it all breaks down.
Here's the page
<div class="achievements-details-container">
#foreach (var group in groupedModel)
{
<div class="achievements-details-group">
#for (var i = 0; i < group.Count(); i++)
{
var item = group.ElementAt(i);
<div class="achievements-details">
<div class="achievements-details-main">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
#(i == 0 ? item.Year.ToString() : string.Empty)
</div>
<div class="achievement-title-before">
</div>
<div class="col-md-4 achievement-title">
#item.Title
</div>
<div class="col-md-1 smaller-padding-left">
<a href="#">
<img src="#Url.Content("~/Images/achievement_arrow.png")" alt="achievement_arrow" class="achievement-arrow-open" /></a>
</div>
<div class="col-md-3">
#item.SmallSummary
</div>
<div class="col-md-2 achievements-action-buttons no-padding">
<div class="">
#{Html.RenderPartial("_EditDiv", item.StatusID == (int)VersionStatus.Draft);}
</div>
</div>
</div>
</div>
</div>
}
</div>
}
</div>
The CSS
.achievements-details-container{
}
.achievements-details{
}
.achievements-details-main{
}
.achievement-title{
font-family: Tahoma, Arial, Sans-Serif;
font-weight: 600;
}
.achievements-details-group
{
border-bottom: 1px solid #F0F0F0;
margin-top: 1%;
}
.achievement-title-before:before
/* This is the css that is giving me the border line, I don't know how to add css for that desired circle here */
/* I tried setting the content to something like '\2022' but it turned out terrible*/
/* I have that circle image as achievement_circle.png */
{
content: '';
border-right: 2px solid #EB5B1D;
height: 500%;
position: absolute;
margin-top: -1%;
}
.achievements-details
{
margin-bottom: 1%;
}
.achievements-action-buttons{
}
.no-padding
{
padding-left: 0px !important;
padding-right: 0px !important;
}
.small-padding-left
{
padding-left: 8%;
}
.smaller-padding-left
{
padding-left: 4%;
}
.xx-small-padding-left
{
padding-left: 2%;
}

Answer 1

You might be able to generate this using the :after pseudo element.
Something like:
.achievement-title-before:after {
content: "";
position: absolute;
/*Set height and width*/
height: 30px;
width: 30px;
/*make it circular, as well as have a background color*/
border-radius: 50%;
background: tomato;
/*position this accordingly*/
left: 0px;
top: 5px;
}
Although, you may need to alter the positioning with the left: and top: values