Archived topic

Change Hyperlink Line Style

5 replies · Started by jm1991 on July 13, 2020

Viewing posts 1–6 of 6

July 13, 2020 at 10:48 am #1362303

Hi there,

Is there a way to style the hyperlink similar to the style seen in this image (ignoring the colour) https://imgur.com/a/zajXH9

My existing CSS to add a hyperlink line is:

a, a:visited, a:hover {
    text-decoration: underline;

Thanks

July 13, 2020 at 10:52 am #1362304

Hi there,

The image link isn't working for me.

Can you link me to the live example you are trying to replicate?

July 13, 2020 at 3:40 pm #1362518

Hey,

Similar to this style here https://woorkup.com/black-friday-2019/

I've tried adding this CSS

a, a:visited, a:hover {
     border-bottom: 2px solid rgba(45, 130, 230, 0.4);
}

But that underlines everything that has an </a> tag, including things like the Nav. I only want it applied to content in the <body> and also to the author link in the blog page headers.

Thanks

July 13, 2020 at 8:45 pm #1362629

Try this instead:

.entry-content a, .entry-content a:visited, .entry-content a:hover {
     border-bottom: 2px solid rgba(45, 130, 230, 0.4);
}

July 14, 2020 at 1:05 am #1362784

Thanks that works for the most part! It would be good to have the author link in blog page headings also underlined.

July 14, 2020 at 5:30 am #1363014

Hi there

include .hero-meta a in your CSS selectors:

.entry-content a, .entry-content a:visited, .entry-content a:hover, .hero-meta a {
     border-bottom: 2px solid rgba(45, 130, 230, 0.4);
}

This archived topic is closed to new replies.

Start building better websites today.