CSS: custom bullets: joined as timeline - css

Question

I am building a vertical timeline as a < ul > with the < li >s as events. This is the intent:
I've customized the bullets easily enough, and I made the vertical line with a background-gradient; the one thing I haven't been able to do is terminate the vertical line at top and bottom.
So far, it looks like this:
My SCSS code:
ul.timeline {
list-style: none;
color: red;
font-size: .8em;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+5,d8d8d8+6,d8d8d8+7,ffffff+8,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
background-position: 29px 0;
li {
&::before {
content: "\26AB";
font-size: 1.3em;
color: #d8d8d8;
display: inline-block;
width: 1em;
margin-left: -1em;
vertical-align: middle;
}
a {
color: black;
text-decoration: underline;
}
}
}
My HTML code:
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
</ul>
I know I can scrap the whole custom-bullet and background-gradient css and do this with background-images, I was just hoping to find a css-only solution.

Answer 1

You can use pseudo-elements for this, one for circle and other one for the line, and :not(:last-child) so you don't set line on last element.
ul {
list-style: none;
}
li {
position: relative;
padding: 10px;
}
li a {
color: gray;
}
li:before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: #D8D8D8;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-40%);
}
li:not(:last-child):after {
content: '';
width: 2px;
height: 100%;
background: #D8D8D8;
position: absolute;
left: -8px;
top: 50%;
}
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
<li>werwer we</li>
</ul>

Answer 2

Method using background-gradient...
ul.timeline {
list-style: none;
color: red;
font-size: .8em;
position: relative;
}
.timeline::before {
position: absolute;
content: "";
display: block;
height: 80px;
width: 30px;
top: 6px;
left: 0;
background: radial-gradient(circle, grey 20%, transparent 20%);
background-size: 50px 25px;
}
.timeline::after {
position: absolute;
content: "";
display: block;
top: 8px;
left: 24px;
height: 70px;
width: 1px;
background: grey;
}
.timeline li {
padding: .5em;
}
a {
color: black;
text-decoration: underline;
}
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
<li>werwer we</li>
</ul>