[Req] Hyperlink underline decoration

[rajujha]

Dear members, I need help to use hyperlink decoration as used in national geographic website

https://www.nationalgeographic.com/...presidents-day-celebrates-only-one-president/

It is a hyperlink with underline and color on hover with the accent color (yellow in their case, I need red in mine).

I am using the Newspaper by tagdiv theme and I don't see this option in customization. Anyone with good CSS knowledge can help me, I will be grateful. I need this feature as I am to reference a lot of links that looks untidy with the red accent color of my website.

My website: https://trainingindustry.in

All help will be highly appreciated.

 

[unicorn]

a:hover {
  background-color: #DB4437;
}

 

[rajujha]

a:hover {
  background-color: #DB4437;
}

Thanks but this will only change background hover color, I need an underline with red with black hyperlink text.

Also, this will make all the links with hover background. I wish to limit it to post content.

 

[unicorn]

.td-post-content a {
color: #000 !important;
text-decoration: underline;
  -webkit-text-decoration-color: #DB4437; /* Safari */
  text-decoration-color: #DB4437;
}

.td-post-content a:hover {
  background-color: #DB4437;
}

 

[frizzel]

The way it is done on the example website is more smooth. Just check in the developer console of the browser how they do it, and in the process learn a little about CSS.

On a side note: I think black text on the red background looks terrible (and for some people is very difficult to read).

 

[rajujha]

.td-post-content a {
color: #000 !important;
text-decoration: underline;
  -webkit-text-decoration-color: #DB4437; /* Safari */
  text-decoration-color: #DB4437;
}

.td-post-content a:hover {
  background-color: #DB4437;
}

@unicorn Thanks a ton....It works like a charm. If you could help me with increasing the underline width that will be great.

Also, I use newspaper theme on two of my websites. However, for the website for which I have shared the link above, a black underline comes on hover, how to remove that?

 

[rajujha]

The way it is done on the example website is more smooth. Just check in the developer console of the browser how they do it, and in the process learn a little about CSS.

On a side note: I think black text on the red background looks terrible (and for some people is very difficult to read).

Only the underline color is red. On hover text is covered in red, so doesn't look distracting.

I have implemented it now with @unicorn help you can see it now (still need to remove black underline on hover, probably also change the text color to white on hover).

Most of the well known blogs are implementing this method of hyperlink decoration and looks modern.

Sadly newspaper theme still does not have that customization.

 

[unicorn]

edited: padding text

--------
use this to forced the red underline and background at hover link.

.td-post-content a:hover {
color: #fff !important;
  background-color: #DB4437;
text-decoration: underline;
  -webkit-text-decoration-color: #DB4437 !important; /* Safari */
  text-decoration-color: #DB4437 !important;
padding: 0 5px !important;
}

 

[rajujha]

@unicorn Works great thanks

 

[unicorn]

@unicorn Works great thanks

my pleasure