文字前面的短水平线

Question

我已经准备好许多关于在标题之前和之后创建水平线的文章，但是所有示例都不完全是我想要的，我无法将它们更改为我想要的内容。

基本上，我需要在标题前面添加一条简短的（25px）水平线。

查看图片：

也许无法使用CSS ...然后如何做得更好？

欢迎任何帮助。

预先感谢

Answer 1

您可以通过创建伪元素，通过CSS轻松地做到这一点。

我在这里使用vertical-align: middle，然后使用一些相对定位，并带有一些负top使其向上移动-根据我的经验，通常比该位置能更好地控制位置使用vertical-align: text-topo.ä.

h1::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -.35em;
  margin-right: .25em;
  width: 25px;
  height: 2px;
  background: #ccc;
  vertical-align: middle;
}

<h1>Foobar</h1>