How to have a list having horizontal lines spanning to the end of line in HTML?

Question

I really have no idea how to create this. Do you have any suggestion?

Answer 1

Here is my try for this

li {
  position: relative
}
li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  border-bottom: 1px solid;
  z-index: -1
}
li span {
  background-color: #fff
}

<ul>
<li><span>First line of the list. And for testing length</span></li>
<li><span>Second line of the list</span></li>
<li><span>Third line of the ul. And this is also the last line of the list.Third line of the ul. And this is also the last line of the list</span></li>
</ul>