Horizontal line under H1 text

Hi there,

try:

h1 {
  position: relative;
  display: inline-block;
}
h1:before {
  content: '';
  width: 75px;
  height: 3px;
  background: #006699;
  position: absolute;
  left: 0px;
  bottom: 0;
  right:0;  
  margin:0 auto;
}

You may want to adjust the line-height and bottom margin of the H1 in the Customizer to position closer/further away below the text.

Hi David,

I added the above code, and it works. But now my H1 text moves to the left. I added text-align:center; but this does not help.

Any suggestions?

Thanks!

Hi there,

On this CSs:

h1 {
  position: relative;
  display: inline-block;
}

Can you try removing display: inline-block;?

Thanks Alvin!

This works for the home page. But now onn the other pages my line is in the middle, and not to the left. How do I change that?

You'll have to add selector to the previous CSS you've added so it only applies to the home page.

Example:

body.home h1 {
  position: relative;
  display: inline-block;
}
body.home h1:before {
  content: '';
  width: 75px;
  height: 3px;
  background: #006699;
  position: absolute;
  left: 0px;
  bottom: 0;
  right:0;  
  margin:0 auto;
}

I have added a selector for the other pages. There I want to move the line to the left under the H1. How can I do that?

Try this:

:not(body.home) h1:before {
  content: '';
  width: 75px;
  height: 3px;
  background: #006699;
  position: absolute;
  left: 0px;
  bottom: 0;
  right:0;  
  margin:0;
}

Note: This isn't good practice. If you wish to apply specific stylings to specific headings, you should use GB Headline's classes to apply proper styling through the class selectors instead of non specific selector styling. (h1 tag)

Hi Alvin,

Are you saying I can create the horizontal line under my H1 text using just GB?

What Elvin means - in the Block Editor, any block you set in Advanced panel you can set an Additional CSS Class - which you can use to style each heading with CSS.

But lets forget that for now.

Can you confirm there will be:

1. H1 aligned left with underline aligned left - if so - where does that apply?
2. H1 centre aligned with underline centre aligned - is so where does that apply ?

Hi David,

I decided to use the H1 underline only on the homepage. This is what I have now:

body.home h1 {
  position: relative;
}
body.home h1:before {
  content: '';
  width: 75px;
  height: 3px;
  background: #F0F5F9;
  position: absolute;
  left: 0px;
  bottom: 0;
  right:0;  
  margin:0 auto;
}

Is this the correct way of doing it?

I decided to use the H1 underline only on the homepage. This is what I have now:

body.home h1 {
  position: relative;
}
body.home h1:before {
  content: '';
  width: 75px;
  height: 3px;
  background: #F0F5F9;
  position: absolute;
  left: 0px;
  bottom: 0;
  right:0;  
  margin:0 auto;
}

Is this the correct way of doing it?

Yes that's correct.

Thanks Elvin!

No problem. :)