如何动态添加带有图像的左边框

Question

我需要这种类型的页面

显示特定个人每年的成就，如您所见，它都是动态的，如果有成就，则显示两行，依此类推。我能够制作这个，。

但我无法得到这些点（或圆圈）。我尝试使用 left-border border-image 等等，但一切都会中断，因为它都是动态的，任何一年都可能只有一个成就（或者没有，在这种情况下它不会出现）或多达十个（我们对此没有任何最大限​​制，但可以是很多）。所以，如果我对图像做某事，一切都会崩溃。

这是页面

  <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>          

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

您也许可以使用 :after 伪元素来生成它。

类似：

.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;
}

不过，您可能需要使用 left: 和 top: 值更改定位