jbassett Posted September 30, 2021 Share Posted September 30, 2021 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! Link to comment
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 Result after applying Css code BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
jbassett Posted October 3, 2021 Author Share Posted October 3, 2021 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? Link to comment
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 My result: BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
jbassett Posted October 3, 2021 Author Share Posted October 3, 2021 Amazing! You fixed another one of my issues. Thanks so much, Bangank! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.