css - 在 2 个跨度之间划线的最佳方法是什么？

Question

我有 2 个跨度

<span style="float:left;">text1</span>
<span style="float:right;">text2</span>

如何在单词之间加上底线？使用 CSS

喜欢__________这个
并喜欢 ____________ 这个
和 ____________ 这样

Answer 1

我的解决方案只有在您可以为指定最大宽度的每一行允许一个容器时才有效。

.container {
  display: flex;
  max-width: 80%; /* adapt this to your needs */
  clear: both;
}

.pull-left {
  float: left;
  display: inline-flex;
  width: 100%;
}

.pull-right {
  float: right;
  display: inline-flex;
  width: auto;
}

.pull-left::after {
  content: '\200B';
  border-bottom: 1px solid #000000;
  width: 100%;
}

<div class="container">
  <span class="pull-left">text1</span>
  <span class="pull-right">text2</span>
</div>
<div class="container">
  <span class="pull-left">longertext3</span>
  <span class="pull-right">4</span>
</div>