Link underline and color change

Hi there,

something like this CSS:

.entry-content p a {
    position: relative;
    z-index: 1;
}

.entry-content p a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 10px;
    background-color: rgba(255, 0, 0, 0.5);
    z-index: -1;
}

I was looking for the exact same thing ;) Works like a charm.. David you da man!

Glad to be of help :)

Hi!

Unfortunately it didn't work for me :(

Also, there are 2 functions:

1. the color is gradient
2. when someone hovers, it highlights the whole word (like in this link: https://codepen.io/Wking/pen/BdmpVx )

Also, not just the paragraphs should be like this but the headings as well.

Thank you so much again!

Any chance you can open a new topic and link us to the page in question?

Thanks :)

Do you mean my website's page or the sample that I want to use as reference? :)

The CSS will only apply to anchor links that are within a Paragraph.
If you change .entry-content p a to .entry-content a in both CSS rules it will apply to any links within the content. See if that works first then we can look at the hover effect.

Wow, now it's working! Thank you so much:)

For the hover effect you can try this:

.entry-content a:hover:after {
    height: 100%; 
    transition: height 0.2s;
}

And to make the gradient - in the previous code replace:

background-color: rgba(255, 0, 0, 0.5);

with a background linear gradient property which you can generate here:

https://cssgradient.io

Thanks David!

I have two last questions:)
1. When the link is in two lines (a very long one for example, or on mobile mainly) the underline is glitching.

2. Where do I insert the gradient code?

Thank you so much again.

1. Can you point me to a page where i can see the very long link?

2. So this CSS:

.entry-content a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 10px;
    background-color: rgba(255, 0, 0, 0.5);
    z-index: -1;
}

Becomes eg.:

.entry-content p a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 10px;
    background: linear-gradient(90deg, rgba(0,89,55,1) 0%, rgba(209,182,2,1) 100%); /* edit this line */
    z-index: -1;
}

Thank you!!

Sure, for example: https://thegreenloot.com/vegan-meal-prep-recipes/

Try this method instead:

.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;
}

It works, yay! Thank you so much. :-)