为什么我无法将线宽调整为100％

Question

我不想从左侧的文字设置线条全宽。

如果文字有一个单词，包含5个字母，则为：

如果文字有三个单词：

有人可以帮助我，这是我试图解决我的问题，但它没有语义上的用处

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>

translateMessage()

Answer 2

以此为理念： https://jsfiddle.net/86hy152p/

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

您可以稍后使用边距和填充调整红色条的高度/位置。