[Resolved] How to add underline to hyperlinked text

[Chris]

Is there a way to add an underline when you hover over a linked text.

So if I hover over a text, it should look like this: http://prntscr.com/qeg9ok

[Chris]

I came across another topic and applied this code:

body:not(.blog):not(.archive) .inside-article a {
    font-weight: bold;
    text-decoration: underline;
}

However, it adds an underline to all linked text. Is there a way to only add underline when hovering over text?

[Leo]

Hi there,

Try this instead:

body:not(.blog):not(.archive) .inside-article a:hover {
    font-weight: bold;
    text-decoration: underline;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

That helps, however, it removed the bold.

Here’s how it looks without hover: http://prntscr.com/qegsb5
Here’s how it looks with hover: http://prntscr.com/qegseb

Could I make the text bolded without hover? And whenever I hover over the text, it adds underline?

[Leo]

This would be your full CSS:

body:not(.blog):not(.archive) .inside-article a {
    font-weight: bold;
}
body:not(.blog):not(.archive) .inside-article a:hover {
    text-decoration: underline;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Thank you my good sir 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts