How to give space between link and underline?

[Ravi Dixit]

Some months ago, I asked How to underline links in post and pages. You can check this thread.

That code is working properly, but I want to give space between the link and underline. Because some words that have a long tail like y, g and some other words cut the line.

You can see the example of the same on this page…

How can I do this?

[David]

Hi there,

instead of the text-decoration: underline; property you would use border-bottom: 1px solid #33ff33;

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

[Ravi Dixit]

Thanks, David!

It is working as I need, Thanks for your support.

[Ravi Dixit]

Hey, David!

I have added the CSS and its working fine also but now I have noticed that it is also underlining the links in Author Box.

I am using the StarBox plugin to show author box…

You can see the live example here.

Please help with this…

[Leo]

Add this CSS as well:

.abh_tab_content .abh_text a {
    border-bottom: 0 !important;
}

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

[Ravi Dixit]

It is working but showing border on hover…

[David]

I edited Leos CSS to include !important which should fix that.

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

[Ravi Dixit]

Hey, David!

How I can hide the Underline from the headings, H2 H3 H4 etc…

It adds underline in headings when I add a link.

Please help

[Leo]

Can you link me to the page in question?

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

[Ravi Dixit]

Hey, Leo!

Check on this page: https://www.staymeonline.com/lazy-load/#best_lazy_load_wordpress_plugins

A heading Bj Lazy Load has the underline.

[Leo]

Add this:

.single .entry-content h3 a {
    border-bottom: none;
}

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

[Ravi Dixit]

It is working, I want to make it for all headings, h2 h3 h4

[Leo]

Keep adding to the CSS like this:

.single .entry-content h2 a,
.single .entry-content h3 a,
.single .entry-content h4 a {
    border-bottom: none;
}

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

[Author]

Posts