Archived topic
Span – Text Decoration Colour + Transition
3 replies · Started by Steven on April 26, 2021
Hey guys,
I'm looking to achieve the red text underline effect in the screenshot below on a new client project. I am switching them to GB/GP Pro :)
I was able to get in with the Chrome inspect tool – But can't seem to get it to work when adding it as additional CSS in the customizer or my child theme. Here's what I have so far.
.gb-headline-9b6008d6 > .gb-highlight > .span {
text-decoration-color: #ff4343 !important;
}I also wanted to add a hover transition duration to the main navigation links and all in-body text links. Something like this:
a:hover {
transition-duration:0.4s;
}Specific details below! Your help is much appreciated.
Hi Steven,
I'm not able to see the screenshot, could you attach it again? Thanks!
For the main navigation hover effect, there's a0.3s transition duration was added, you could change it to 0.4s in the below CSS which can be found at customizer >additional CSS:
https://www.screencast.com/t/cpQaa1JW
For the in-body text link hover effect, could you link us to a page that contains some in-body text links and have their hover effect set?
Let me know :)
Sorry, here's the screenshot of what I have currently: https://cln.sh/0r1lZ5
Here's a screenshot of what I want to do: https://cln.sh/KO3FXU
Hi there,
.gb-headline-9b6008d6 > .gb-highlight > .span {
text-decoration-color: #ff4343 !important;
}
This needs a bit of correction. <span> isn't a class. Also, does this color need to apply on hover?
If so, try this:
.gb-headline-9b6008d6 span[style~="underline;"]:hover {
text-decoration-color: #ff4343 !important;
}If it's not for hover, just remove the :hover.
Have you sorted the one on the navigation? Let us know.
