Horizontal rules CSS hack - left-align text

[Fulike]

Hi,

I use h4 to make horizontal rules (section).
I would like to place the text from the centre to left living a short line before the text.

Could you pls help me!
I wrote the method I use and the picture of the result.

#### Horizontal rules `---`

h4 { display: flex; width: 100%; align-items: center; } h4:before, h4:after{ content: ''; background: gray; height: .1em; margin: .2em; flex: 1;

Picture:

Thanks
Füles

[liam]

@Fulike

h4:before

The issue is the h4:before rule is growing to fill as much space as it can. Try the following instead:

h4 {
  display: flex;
  width: 100%;
  align-items: center;
}

h4:before {
  content: "";
  background: gray;
  height: 0.1em;
  margin: 0.3em;
  width: 1em;
}

h4:after {
  content: "";
  background: gray;
  height: 0.1em;
  margin: 0.3em;
  flex: 1;
}

Hope that helps!

[Fulike]

liam,

Thanks very much, it is the pertfect solution for me.
Fülike