Adding a centre line below header

Site URL: https://www.eshertennis.co.uk/your-committee-1

Hello!

I'd like to add a thin centre aligned orange line underneath the H1s on my site.

I've followed the tips in this video and added the code they provided:

h1 {
  position: relative;
  }

h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 150px;
  left: 0;
  background: orange;
  transform: translateY(10px)
}
&[style*="text-align:
center"]:after {
margin; 0 auto;
right: 0;
}

I can get the line to appear at the thickness I want and left align no problem but the last part is tripping me up. Whenever I enter the code from &[style... I get a syntax error. I'm sure I'm entering the code correctly but could somebody please tell me what I'm doing wrong!

Thanks!

On 9/30/2021 at 8:41 PM, jbassett said:

Site URL: https://www.eshertennis.co.uk/your-committee-1

Hello!

I'd like to add a thin centre aligned orange line underneath the H1s on my site.

I've followed the tips in this video and added the code they provided:

h1 {
  position: relative;
  }

h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 150px;
  left: 0;
  background: orange;
  transform: translateY(10px)
}
&[style*="text-align:
center"]:after {
margin; 0 auto;
right: 0;
}

I can get the line to appear at the thickness I want and left align no problem but the last part is tripping me up. Whenever I enter the code from &[style... I get a syntax error. I'm sure I'm entering the code correctly but could somebody please tell me what I'm doing wrong!

Thanks!

Add to Home > Design > Custom Css

#block-50b1f4e55a828da2e02f h1::after {
  content: '';
  width: 100%;
  height: 1px;
  background:#F8D197;
  position: absolute;
  bottom:0;
  left: 0;
}

Support me by pressing 👍 if this useful for you 

Result after applying Css code

Thank you as always Bangank. I want the line to be centred and much shorter (see attached). I know how to reduce the width but I don't know how to keep it centred. Can you help?

16 minutes ago, jbassett said:

Thank you as always Bangank. I want the line to be centred and much shorter (see attached). I know how to reduce the width but I don't know how to keep it centred. Can you help?

You can put some additional Css transform

#block-50b1f4e55a828da2e02f h1::after {
  content: '';
  width: 20%;
  height: 1px;
  background:#F8D197;
  position: absolute;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
}

Change the value in width to get the suitable length of line

Support me by pressing 👍 if this useful for you

My result:

Amazing! You fixed another one of my issues. Thanks so much, Bangank!