-3

I've ready many posts about creating a horizontal line before and after header, but all the examples are not totally what i want to have and I cannot change them to what I would like to have.

Basically I need a SHORT (25px) horizontal line in front of the Header.

See image: enter image description here

Maybe it is not possible to do with css ... how to do it better then?

Any assistance would be welcome.

Thanks in advance

Alnedru
  • 2,573
  • 9
  • 50
  • 88

1 Answers1

1

You can easily do this via CSS, by creating a pseudo element.

I used vertical-align: middle here, and then some relative positioning with a bit of negative top to get it to move up - in my experience, that usually gives a bit better control over the position, than using vertical-align: text-top o.ä. on its own.

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>
04FS
  • 5,660
  • 2
  • 10
  • 21
  • but it is at top, how do you make it in the middle? – Alnedru May 29 '19 at 12:29
  • As I explained, I used relative positioning and `top` to get it there (wasn’t clear from your picture where exactly you wanted it) - so remove that, if you want it to be where `vertical-align: middle` on its own would place it. – 04FS May 29 '19 at 12:33