[Resolved] Link underline and color change

[Mira]

Hi! Could you please help me how to set my links ( in the content area) to be underlined and colored?

Like in this picture:

Thank you in advance!

[David]

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

[Paul]

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

[David]

Glad to be of help 🙂

[Mira]

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!

[Leo]

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

Thanks 🙂

[Mira]

Do you mean my website’s page or the sample that I want to use as reference? 🙂

[David]

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.

[Mira]

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

[David]

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

[Mira]

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.

[David]

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

[Mira]

Thank you!!

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

[David]

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

[Mira]

It works, yay! Thank you so much. 🙂

[Author]

Posts