[Resolved] Underline Links Padding

[Ivaylo]

Hi,
how can I increase the distance between the link text and the underline? Tried some of the already published topics in the forum, but had no luck.
Thanks!

[Fernando]

Hi Ivaylo,

You may alter the menu item width in Appearance > Customize > Layout > Primary navigation > Menu Item Width.

As for the underline, can you try increasing the Menu Item Height there as well?

[Ivaylo]

I suppose I didn’t ask properly.

I need only links in the content to be underlined and the underline below the link text to be a bit farther.

When I put Underline Links in Customize – all my links are underlined and I don’t want that.

[Fernando]

Can you share the link to the site in question?

Moreover, may we know if you want all links in the content of both pages and posts to be underlined?

[Ivaylo]

Only posts, thanks

[Fernando]

I see.

Let’s tackle that first, and then fix the menu underlines.

Try adding this CSS:

body.single-post a{
    text-decoration: underline !important;
}

Let us know how the links in posts go.

[Ivaylo]

This made links in the content underline, but also in the menu.

[Fernando]

I see. Try this instead:

body.single-post .content-area a {
    text-decoration: underline !important;
}

[Ivaylo]

Looks good now. No underline in menu links only in content.

Now how to increase the distance between the link and the underline?

[Fernando]

Can you try this instead?:

body.single-post .content-area a {
    position:relative;
    padding-bottom: 3px;
}

body.single-post .content-area a:after {
    content:"";
    position:absolute;
    top: 100%;
    left:0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    z-index: 999;
}

This places the underline further down. You may replace the values to your preference.

[Ivaylo]

Two problems now:
1. I see underline on Links for Breadcrumbs and Author
2. When I hover over a link in the content, it makes another underline ( appears like two underlines )

[Ivaylo]

In General-Underline Links is set to Never.

[Ivaylo]

Would be best to have no underline when hovering over the link, as the underline will be there all the time.

[David]

Hi there,

1. Remove all of the underline CSS you have so far.

2. Add this CSS:

.entry-content p a:not(:hover) {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 4px;
    text-decoration-color: red;
}

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

[Ivaylo]

Thanks!

1. On hover I need to remove the underline – the links are underlined, but when hovering over the underline to disappears.

[Author]

Posts