html - 如何在选定字段之间添加水平线

Question

如何在选择的字段之间添加水平线，如下所示:

请检查彼此之间的水平线:

Answer 1

试试这个

.line {
  position: relative;
  padding-left: 10px;
}
.line:first-child {
  padding-left: 0;
}
.line select {
  position: relative;
}
.line:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
}

<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>