<ul class="timeline">
<li><span class="badge badge-primary badge-pill font-weight-normal">2018 Q1: Founded company</span></li>
<li><span class="badge badge-primary badge-pill font-weight-normal">2018 Q2: Launched prototype</span></li>
<li><span class="badge badge-primary badge-pill font-weight-normal">2018 Q3: 100k active users</span></li>
<li><span class="badge badge-primary badge-pill font-weight-normal">2018 Q4: Raised $1m funding</span></li>
</ul>
ul.timeline li
{
	position: relative;
   height: 3em;
 	color: #888;
}

ul.timeline li:before
{
    content: "";
    display: inline-block;
    height: 3em;
    width: 1px;
    background: #aaaa;
    margin: 0;
    padding: 0;
    position: absolute;
    left: -11px;
    top: -0.4em;
    z-index: -1;
}

ul.timeline:before
{
	content: "●";
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	left: -1em;
	top: 0.1em;
	color: #aaa;
}

ul.timeline:after
{
	content: "●";
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	left: -1em;
	top: -1em;
 	color: #aaa;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.