css - 标签应根据文本动态增加大小

Question

我有<hr/>标签，应该根据下面的文本动态增加其大小到 <hr/>标签。

<div class="outer">
<hr class="line"/>
The above line should be match with this sentence.
</div>

请提出建议。

Answer 1

将inline-block添加到外部div

示例 1:

.outer {
  display: inline-block;
}

<div class="outer">
          <hr class="line"/>
          The above line should be with this sentence.
      </div>

示例 2:

.outer {
  display: inline-block;
}

<div class="outer">
          <hr class="line"/>
          short text
      </div>