Remove line from first and last child - css

Question

I've got this timeline code, I am trying to remove the line on top of first child and from last child, how can I get this border, do I need to add another absolute element to cover it up or?
Image what I want removed
Same goes for the line after End button.
body {
margin: 0;
}
.tree {
position: relative;
}
.tree {
position: relative;
list-style: none;
}
li {
border-left: 1px solid #abaaed;
padding-bottom: 50px;
position: relative;
padding-left: 20px;
margin-left: 10px;
height: auto;
display: flex;
align-items: center;
}
li:last-child {
padding-bottom: 0;
}
li::before {
content: '';
width: 15px;
height: 15px;
background: white;
border: 1px solid #4e5ed3;
border-radius: 50%;
position: absolute;
left: -8px;
}
li::after {
content: '';
width: 10px;
height: 2px;
position: absolute;
left: 7px;
top: auto;
background: #4e5ed3;
}
button {
padding: 10px 20px;
}
<div>
<ul class="tree">
<li><Button>Start</Button></li>
<li>
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</li>
<li><Button>
End</Button></li>
</ul>
</div>

Answer 1

You can try using background instead of border.
:root {
--circle-size: 15px;
}
body {
margin: 0;
}
.tree {
position: relative;
}
.tree {
position: relative;
list-style: none;
}
li {
padding-bottom: 50px;
position: relative;
padding-left: 20px;
margin-left: 10px;
height: auto;
display: flex;
align-items: center;
--line-padding: 0px;
--y-position: 0;
background: linear-gradient(#abaaed, #abaaed) 0 var(--y-position) / 1px calc(100% - var(--line-padding)) no-repeat;
}
li:first-child,
li:last-child {
--line-padding: 15px;
}
li:first-child {
--y-position: 100%;
}
li:last-child {
padding-bottom: 0;
}
li::before {
content: '';
width: 15px;
height: 15px;
background: white;
border: 1px solid #4e5ed3;
border-radius: 50%;
position: absolute;
left: -8px;
}
li::after {
content: '';
width: 10px;
height: 2px;
position: absolute;
left: 7px;
top: auto;
background: #4e5ed3;
}
button {
padding: 10px 20px;
}
<div>
<ul class="tree">
<li>
<Button>Start</Button>
</li>
<li>
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</li>
<li>
<Button>
End</Button>
</li>
</ul>
</div>