css - 两个单词之间水平线的 CSS 技术

Question

我正在尝试在两个单词的中间添加一条水平线。例如：

第一个词----------------------- 第二个词

有没有办法在 CSS 或 flex 中做到这一点？

标签： cssflexbox

Answer 1

我正在使用 Flexbox 提供解决方案，因为我没有从上面@Awais 评论中的链接中看到一个。

.container {
  display: flex;
  justify-content: space-between;
}

.container .middle {
  margin: 0 5px;
  transform: translateY(-50%);
  border-bottom: 1px dashed;
  flex-grow: 1;
}

<div class="container">
  <span>First word</span>
  <span class="middle"></span>
  <span>Second word</span>
</div>

jsFiddle