html - 如何将没有内容的跨度变成分隔线？

Question

我正在尝试将以下 span 标签转换为水平分隔线:

HTML:

<div class="form-group-divider">
  <span></span>
  <h5>{{ field.title }}</h5>
  <span></span>
</div>

CSS:

.form-group-divider {
  h5 {
    display: inline-block
  }

  span {
    background-color: border-color
    width: 100%
    height: 1px
    content: ' '
  }
}

如果 span 标签有内容，则不会显示。我以为 content: ' ' 会解决这个问题，但事实并非如此。

如何让这些span标签显示出来？

Answer 1

<span>是内联元素，因此您需要内容来赋予它任何可辨别的维度。我添加了 display:block因为它们应该表现得像 <hr/> .顺便说一句，你为什么不使用 <hr/> ？以下演示以 <hr/> 为例和 <span>

演示

.form-group-divider h5 {
  display: inline-block
}

.form-group-divider span {
  display: block;
  background-color: grey;
  width: 100%;
  height: 1px;
}

<div class="form-group-divider">
  <hr/>
  <h5>Using &lt;hr/&gt;</h5>
  <hr/>
</div>


<div class="form-group-divider">
  <span></span>
  <h5>Using &lt;span&gt;</h5>
  <span></span>
</div>