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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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