How to put this dash pseudo element between li's

Question

I would like this red dash to be equally positioned between 1st and 2nd(and 2nd and 3rd) "li" in this list, but it appears above it and not on the left side. Is it possible to do it this way? Here's the example:

http://codepen.io/anon/pen/ENzXao

This is what I am trying to accomplish: http://sketchtoy.com/67757539

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:nth-child(2)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

Answer 1

I would remove the margins and just add inline-block pseudo-elements:

.main__headers--info > ul > li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}
.main__headers--info > ul > li:not(:first-child)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

See How to remove the space between inline-block elements? if the space before the pseudo-elements annoys you.

Answer 2

I have modified the pen.

here is the demo If i got your question correctly.

add this css code to the 2nd and 3rd li's :before element

  position: absolute;
  left: 0;
  width: 100%;

and position: relative to li element Codepen

Answer 3

Here, working example, will put the red line on any li-element not the first.

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:not(:first-of-type)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

Answer 4

.wrapper {
  display: flex;
  margin: 0 auto;
  padding: 0 30px;
  width: 100%; }

.seperator {
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 1px;
  margin-top: 0 !important; }
  .seperator hr {
    height: 2px;
    background: gray;
    border: none;
    vertical-align: middle; }

<div class="wrapper">
    <div class="">
       Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>
</div>