html - 在高度中间从文本末尾到 block 末尾的线

Question

我有一些标题，想添加从该标题中的文本末尾到该标题 block 末尾的行。行应位于行高的中间。

类似这样的东西

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

Answer 1

伪元素是理想的选择:

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;
}

<h1>Some Text</h1>

现代版本(使用 flexbox 代替定位)

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

<h1>Some Text</h1>