Using a ::before pseudo element on UL to create a time line representation

Question

I would like to achieve a visual layout of a story line using li elements inside a ul, something that would look like this:

li-element1
 .
 .
li-element2
 .
 .
li-element3

I am using the ::before pseudo element to add a line through the whole ul element, but it is visible on top of the li elements, which i do not want to happen. How can I have the line to hidden behind the lis and only be visible between the margin gaps? i have unsuccessfully tried the Z-index property already. here is a link to a pen with my current code.

.container ul{
  position: relative;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  border: 1px dashed blue;
}
.container ul li{
  margin: 15px;
}

<div class="container">
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>

Update

In the original question, I was oblivious to the fact that the bullets in li elements, are not actually part of the li element itself and hence are not actually affected by any background-color set to them. Now with this in mind and implementing the answers suggested, combining the use of z-index, background-color, margins and paddings and, additionally setting the ul list-style-type: none I have updated the code to:

.container ul{
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 16px;
  border: 1px dotted red;
}
.container ul li{
  margin: 15px;
  padding: 0px 0px;
  position: relative;
  z-index: 1;
  background-color: white;
}

<div class="container">
  <ul>
    <li>• First</li>
    <li>• Second</li>
    <li>• Third</li>
    <li>• Fourth</li>
  </ul>
</div>

Answer 1

You can use a white background, padding and relative positioning to hide part of the timeline with each item:

.container ul{
  position: relative;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  border: 1px dashed red;
}
.container ul li {
  display: block;
  position: relative;
  left: -20px;
  background-color: white;
  padding: 5px;
  padding-left: 20px;
  margin: 40px 0px;
}

<div class="container">
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>