I am looking to create a minimalist design using bootstrap, html, and css. The design should resemble the image found at this link: https://i.sstatic.net/WIgHJ.png
I have attempted the following code to achieve the design:
<div class="container mt-5">
<div class="row">
<div class="col-3">
<ul class="list-unstyled lists">
<li>Initial Meeting</li>
<li>Pre Test</li>
<li>Application for Job</li>
<li>Legal Screening</li>
<li>Additional Processing</li>
<li>Schedule for Training</li>
</ul>
</div>
</div>
</div>
The corresponding css is as follows:
.container{
margin-top:200px;
}
.lists{
border:1px solid #000;
}
.lists li{
background:#e1ddd3;
color:#333;
font-weight: bold;
font-family: 'Rajdhani', sans-serif;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
height: 40px;
position: relative;
margin:10px;
padding:10px 20px;
}
.lists li:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #e1ddd3;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
However, I am struggling to add a background line behind the list items. If anyone could review this and suggest a solution, I would greatly appreciate it.