[Resolved] How to show yellow underline on Links?

[Sibi Paul]

Hi…

I have seen popular News websites are Highlighting their Internal links with a thick yellow underline…

That helps them to reduce the bounce rate…

people are attracted to click on those links…

How can we do that in GP?

[Elvin]

Hi there,

Can you specify which links do you want to apply this?

If it’s the content links, you can try adding this CSS:

.entry-content a {
    text-decoration: underline solid yellow;
}

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

[Sibi Paul]

Hi…

That code worked…

But, I need this line a little bit thicker… and a little space between the TEXT and Line…

Then only it’ll appear to stand alone and people can read the text properly…

Thanks.

[Ying]

Hi Sibi,

Try this CSS instead, feel free to adjust the numbers:

.entry-content a {
    border-bottom: 3px solid yellow;
    padding-bottom: 2px;
}

[Sibi Paul]

That’s Awesome…

Can I add any Animation on Hover…

Animation on this Underline while hoven…

I’ve seen that on some websites before…

even if it’s not possible… I’m very much happy with the current settings…

Can I change the breadcrumbs font size? ( create new ticket or same )

[Sibi Paul]

When I hover on Links, it turns Bold…

is that Possible?

[Ying]

With animation that’s another story, you could give this CSS a try, but it won’t work if the link occupies more than 1 row.

.entry-content a {
    position: relative;
}
.entry-content a:hover:before {
    right: 0;
    transition: all 0.5s ease;
}
.entry-content a:before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 100%;
    background-color: yellow;
    height: 2px;
}

And yes please, open a new topic for non-related questions, thanks 🙂

[Sibi Paul]

That worked…

Thanks.

[Ying]

Glad to hear that 🙂

[Sibi Paul]

This code adds Underline everywhere…

.entry-content a {
    border-bottom: 3px solid yellow;
    padding-bottom: 2px;
}

What if, I want to avoid Underline from the Home page, archive posts, and meta?

I only want to show Underline in the single posts.

Not even in the pages.

Kindly help.

Thanks.

[David]

Change this selector:

.entry-content a

to:

.single-post .entry-content p a

That will select only links with a paragraph within the content of the single post.

[Author]

Posts