javascript - 为什么我不能将线宽调整为 100%

Question

我不想从左侧的文本设置行的全宽。

如果文本有一个单词有5个字母是这样的:

如果文本有 3 个词是这样的:

谁能帮帮我，这是我试图解决我的问题的方法，但它在语义上没有用

https://jsfiddle.net/xoty99bc/

<h3>
Lorem
</h3><div class"line">

</div>


h3{
  display:inline-block;
  width:20%;
}
div{
  display:inline-block;
  height:2px;
  width:80%;
  background-color:red;
}

Answer 1

您可以使用Flexbox 和:after伪元素。或者如果你不想使用 :after 你可以这样做 Demo

h3 {
  display: flex;
  align-items: center;
}

h3:after {
  content: '';
  flex: 1;
  height: 1px;
  background: red;
  margin-left: 10px;
}

<h3>Lorem ipsum </h3>