从文本末尾到高度中间的块结束的行

Question

我有一些标题，并希望添加从该标题中的文本末尾到该标题块结尾的行。线应位于线高的中间。

像这样的东西

+---------------+
| some text ----|
+---------------+

Answer 1

伪元素是理想的：

＆＃13;

＆＃13;

h1 {
  overflow: hidden;
  position: relative;
}
h1::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  margin-left: .25em;
  background-color: red;
}

＆＃13;

<h1>Some Text</h1>

＆＃13;

＆＃13;

＆＃13;

现代版（使用flexbox而不是定位）

＆＃13;

＆＃13;

h1 {
  overflow: hidden;
  display: flex;
  align-items: center;
}
h1::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-left: .25em;
  background-color: red;
}

＆＃13;

<h1>Some Text</h1>

＆＃13;

＆＃13;

＆＃13;