Jump to content

Adding a centre line below header

Recommended Posts

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!

Screenshot 2021-09-30 at 14.40.37.png

Screenshot 2021-09-30 at 14.40.20.png

Link to comment
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!

Screenshot 2021-09-30 at 14.40.37.png

Screenshot 2021-09-30 at 14.40.20.png

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 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Result after applying Css code

image.thumb.png.bfaa0b133829eca8e677da99c2fbd15c.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

Screenshot 2021-10-03 at 13.48.58.png

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

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My result:

image.thumb.png.e2e1331790cc77652cba0c7bdca45a36.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.