文字前面的短水平线

时间:2019-05-29 12:16:13

标签: html css

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

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

查看图片:enter image description here

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

欢迎任何帮助。

预先感谢

1 个答案:

答案 0 :(得分: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>