MarcUK1603 Posted June 14, 2021 Share Posted June 14, 2021 I've injected this CSS to create animated hover over effect on hyperlinks, but it's applying uniformly across site. This means the hover effect is #000000 even if on a dark background, making it illegible. Is there a way to create an override for darker pages, to that it shows as #FFFFFF? // Fade Out Line Hyperlink - Middle Stretch Out // p a{ display: inline-block; style: none !important; } p a:hover:after{ transform: scaleX(1) !important; } p a:after { display:block; content: ''; border-bottom: solid 2px #000000 !important; } p a:after { transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999 !important; } Site link: https://mandarin-circle-ndlm.squarespace.com/home Password: 20tyde21! Thanks M Link to comment
tuanphan Posted June 15, 2021 Share Posted June 15, 2021 You can set color: #ffffff; then add this CSS to change underline color on Light Theme section[data-current-styles*="light"] p a::after { border-color: white !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MarcUK1603 Posted June 15, 2021 Author Share Posted June 15, 2021 Thanks for this. That code works/changes on light background. It's the dark background that I need changing though. Do you know how 'Darkest 1' background option is referred to as in CSS? I've tried changing "light" to "darkest" and "darkest 1" but neither are working...? Link to comment
tuanphan Posted June 16, 2021 Share Posted June 16, 2021 The dark background has no data current style. Try this section:not([data-current-styles*="light"]) p a::after { border-color: green !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MarcUK1603 Posted June 17, 2021 Author Share Posted June 17, 2021 That's done it worked - brilliant. Thanks for help. Out of curiosity, why hasn't SS applied a current data style? It has for "light" but you're right, having inspected the theme for "dark" there's nothing set/showing? Weird. Link to comment
tuanphan Posted June 24, 2021 Share Posted June 24, 2021 On 6/17/2021 at 3:59 PM, MarcUK1603 said: That's done it worked - brilliant. Thanks for help. Out of curiosity, why hasn't SS applied a current data style? It has for "light" but you're right, having inspected the theme for "dark" there's nothing set/showing? Weird. Not sure. Do you want fix these? Site URL: https://mandarin-circle-ndlm.squarespace.com/home 1. (Tablet-Homepage) resize text? 2. (Tablet-Homepage) Make 2 items/row + reduce text size? 3. (Mobile-Homepage) Make buttons side by side? 4. (Mobile-Header) Click burger, nothing appear Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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