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) 🗓️ 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
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) 🗓️ 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
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 (edited) 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 Edited October 3, 2021 by bangank36 tuanphan 1 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
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 My result: jbassett 1 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
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
Create an account or sign in to comment
You need to be a member in order to leave a comment