Underline Links Padding

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?

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.

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?

Only posts, thanks

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.

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

I see. Try this instead:

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

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

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

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.

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 )

In General-Underline Links is set to Never.

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

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;
}

Thanks!

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