文本后面的垂直居中的行

Question

我尝试创建的是一个简单的行，在文本垂直居中后。到目前为止，我已经提出了以下解决方案：

<h1>lorem ipsum <span></span></h1>

h1 > span {
  display: inline-block;
  height: 1px; width: 50px;
  margin-bottom: .2em;
  background-color: black;
}

https://jsfiddle.net/7xqp7m2h/

这种方法的坏处（更不用说线条不是100％垂直居中）是因为这个简单的任务是一个过于复杂的解决方案。

我想到的可能是在跨度中添加一行不透明的文本：

h1 > span {
  text-decoration: line-through;
}

然而，我未能成功。

关于如何使用隐藏文本进行可见直线操作的任何想法，或者可能是比我现在更简单的其他解决方案？

Answer 1

根本不需要跨度。

伪元素和flexbox可以做到这一点。

JSFiddle Demo

h1::after {
  content: '';
  height: 1px;
  background: red;
  flex: 1;
  margin-left: .25em;
}
h1 {
  display: flex;
  align-items: center;
}

<h1>lorem ipsum</h1>

Answer 2

Flex可以轻松地帮助你（如果你想要h1或伪的话，设置一个宽度）。

使用伪避免HTML中的额外跨度，您可以将其应用于任何标题级别。

h1 {
  display: flex;
  background: gray;
}
h1:after {
  content: '';
  border-top: 1px solid;
  flex: 1;
  margin: auto 0.5em;
}

<h1>lorem ipsum </h1>

https://jsfiddle.net/7xqp7m2h/4/

Answer 3

https://jsfiddle.net/9crkt4hn/

在范围中使用 作为文本将创建一个空格而不将其视为空格：P 正如你在小提琴中看到的那样，你看到它没有问题。