How to create a ul with horizontales lines between each li?

Question

I have this:

<ul>
    <li>bullet point</li>
    <li>bullet point</li>
    <li>bullet point</li>
</ul>

How can I achieve to add horizontales lines like this to it:

Answer 1

Something like this?

CSS originally from HTML list-style-type dash with modifications using Horizontal Line Extension and Horizontal bar

ul {
  margin: 0;
}

ul.dashed {
  list-style-type: none;
}

ul.dashed>li {
  text-indent: -5px;
}

ul.dashed>li:before {
  content: "⎯ ";
  text-indent: -5px;
}

ul.dashed>li.smaller:before {
  content: "―";

  text-indent: -5px;
}

<ul class="dashed">
  <li>bullet point</li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li>bullet point</li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li class="smaller"></li>
  <li>bullet point</li>
</ul>

Answer 2

I used a combination of padding, ::before and background-gradient, where I put the black ::before element on top of the gray striped gradient. The positive effect of using background-gradient is that the number of stripes adapts to the content.

ul {
  --spacing-half: 0.5rem;

  list-style-type: none;
  padding: 0px;
}

li {
  padding-left: 3rem; 
  padding-bottom: 3rem;
  position: relative;
}

li {
  background: linear-gradient(to bottom,
      transparent var(--spacing-half), transparent var(--spacing-half),
      #cccccc var(--spacing-half), #cccccc calc(var(--spacing-half) + 3px),
      transparent calc(var(--spacing-half) + 3px));
     
  background-repeat: repeat-y;
  background-size: 11px 1rem;
  background-position: calc(var(--spacing-half) + 2px) 0px;
}

li::before {
  content: '';
  display: block;
  position: absolute;
  left: var(--spacing-half);
  top: var(--spacing-half);
  height: 3px;
  width: 15px;
  background-color: black;
}

<ul>
    <li>bullet point</li>
    <li>bullet point</li>
    <li>bullet point</li>
</ul>