Link underline and color change

This topic has 21 replies, 2 voices, and was last updated 3 years, 4 months ago by Denise.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
October 5, 2019 at 2:14 am #1026747

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!

October 5, 2019 at 7:37 am #1026872
David
Staff
Customer Support
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;
}
```
October 6, 2019 at 4:04 am #1027434

Peery

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

October 6, 2019 at 5:13 am #1027470

David
Staff
Customer Support

Glad to be of help 🙂

October 6, 2019 at 8:20 am #1027645

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!

October 6, 2019 at 11:01 am #1027763

Leo
Staff
Customer Support

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

Thanks 🙂

October 6, 2019 at 11:02 am #1027764

Mira

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

October 6, 2019 at 1:10 pm #1027834

David
Staff
Customer Support

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.

October 7, 2019 at 12:01 am #1028032

Mira

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

October 7, 2019 at 5:33 am #1028233
David
Staff
Customer Support
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
October 7, 2019 at 10:35 am #1028612

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.

October 7, 2019 at 3:32 pm #1028835
David
Staff
Customer Support
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;
}
```
October 8, 2019 at 12:43 am #1029005

Mira

Thank you!!

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

October 8, 2019 at 7:57 am #1029410
David
Staff
Customer Support
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;
}
```
October 8, 2019 at 8:16 am #1029432

Mira

It works, yay! Thank you so much. 🙂
Author

Posts