[Resolved] Link underline and color change

[David]

Awesome – glad to be of help.

[Denise]

Hi David!
I was looking exactly for this! Thanks a lot for the detailed explanation.
One question, by using your last CSS suggestion to apply the effect to multiple lines, is it possible to adjust the bottom position of the underline? I would like to make it closer to the text.

.entry-content a {
box-shadow: inset 0 -0.5em #16aa6f;
transition: box-shadow 0.2s ease-in;
}
.entry-content a:hover {
box-shadow: inset 0 -1em #16aa6f;
}

Thanks a lot!

[David]

Hi there,

you can’t move the inset shadow as it sticks to the elements box model.
What you can do is layer multiple shadows though, using the one in front to mask your some of the one behind:

.entry-content a {
    box-shadow: inset 0 -0.15em #fff, inset 0 -0.5em #16aa6f;
    transition: box-shadow 0.2s ease-in;
}

.entry-content a:hover {
    box-shadow: inset 0 -0.15em #fff, inset 0 -1em #16aa6f;
}

So our first shadow which doesn’t change on hover ie. inset 0 -0.15em #fff, will display a white background ( change that to match your background color ) in front of the shadow you want to see.

[Denise]

Super!! It does exactly what I was looking for.

Thanks a lot for your help!
You guys have great customer support! ❤
Denise

[Denise]

Sorry David! 😁
I have one more question.

I have a CCS class (.mylinks a) to give a different color the text underlined.
However, now that I have added this new box-shadow, it seems that it does not matter that I’ve added the class to the link.
Is not working.
Seems like I have to specify .mylinks li a, .mylinks p a, and so on.

Do I have to specify every specific place where the link could be placed?

Thanks!
Denise

[David]

If you can start a new topic and share a link to where we can see the issue, then we can see whats going on.

[Denise]

Sure thing!
I’ll do a new topic.
Thanks David!

Denise

[Author]

Posts