行内水平分割线

Question

如何使hr元素像片段中所示一样成为内联元素，但不使用absolute定位，并且hr不横跨文本？

div {
    position: relative;
}

hr {
  position: absolute;
  top: 0.125rem;
  left: 0;
  right: 0;
}

<div>
  Hello, World? <hr>
</div>

- Monsieur Pierre Dunn

---

当你说“_inline_”但不穿过文本时，你实际上想让线出现在哪里？是在文本旁边还是在下面？从你的问题中我无法理解目标是什么。 - Martin

一个通用的重复项：https://dev59.com/3W435IYBdhLWcg3wyzMJ - Temani Afif

@Martin 紧挨在行尾。 - Monsieur Pierre Doune

Answer 1

您可以在父元素上使用display:flex，然后给hr元素设置flex-grow属性，使其填充剩余的行：

div { display:flex; }

hr {
  flex-grow:1;
  margin-left:10px; /* gap on left */
}

<div>
  <span>Hello, World?</span> <hr>
</div>

- Pete