如何将这个破折号伪元素放在 li 之间

Question

我希望这条红色破折号在此列表中位于第 1 和第 2（以及第 2 和第 3）"li" 之间，但它出现在它上方而不是左侧。可以这样做吗？这是示例：

.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

笔已修改

如果我答对了你的问题，这里是演示。

将此 css 代码添加到第二和第三行的 :before 元素

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

和 position: relative 到 li 元素 Codepen

Answer 2

这里，工作示例，将把红线放在任何 li 元素上，而不是第一个。

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

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

Answer 4

我会删除边距，只添加行内块伪元素：

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

如果伪元素前面的space让你不爽，请看How to remove the space between inline-block elements?

如何将这个破折号伪元素放在 li 之间

How to put this dash pseudo element between li's

html

css

pseudo-element