html - 如何将此破折号伪元素放在 li 之间

Question

我希望这个红色破折号均匀地位于此列表中的第一个和第二个(以及第二个和第三个)“li”之间，但它出现在其上方而不是左侧。这样可以吗？示例如下:

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

这就是我想要实现的目标: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

我会删除边距并仅添加内联 block 伪元素:

.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>

参见How to remove the space between inline-block elements?如果伪元素之前的空格让您烦恼。