[Resolved] Style all links on GP

[Danny]

Hello,

Thank you in advance for your help! I really like the styling of the css in this post. I have applied it to my menu and I would like to apply this styling to all my links on the website excluding the buttons. I would like to apply it to the secondary menu as well. On link hover, I would like the link to apply the underline styling and change color.

[Leo]

Hi there,

This should take care of both primary and secondary navigation:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after,
    .secondary-navigation .secondary-menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after,
    .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
    .secondary-navigation .secondary-menu > .menu-item.current-menu-ancestor > a::after,
    .secondary-navigation .secondary-menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

I’ve asked Tom to take a look at normal links 🙂

[Tom]

I don’t believe that CSS will work for regular links, but this post might help: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

Try replacing h2 in the code with p.

[Danny]

Hey Leo,

How would I add spacing between the secondary menu and the underline, see image below please:

[Danny]

Hey Tom,

Thank you so much, that styling is perfect for the p tag. This makes me soooo happy! I added seperate code for h3 tags. How would I customize the code to underline the complete link. It only underlines the last line if the h3 tag is in two sentences. Please see example below:

[Danny]

Hey Leo,

How would I remove the underline from the stylized menu button, see example below:

[Tom]

To stop it from happening in your menu button, replace all instances of: .menu-item

With: .menu-item:not(.nav-button)

I’m not sure about the multi-line links unfortunately, I don’t believe the hover effects can accommodate those.

[Danny]

Hi TOM,

Can you help me implement something like the link below please for links? I would like it to be one solid color, not a gradient.

Link

[Tom]

That example is using SCSS, which needs to be processed into regular CSS. Perhaps there’s another example you can find?

[Danny]

Hi Tom,

Thank you for your help and time. Can you make a recommendation on the below code to make that work? If not, can you recommend something to underline multi-line links? The links should display as different colored text without an underline. I would like to underline only on hover. We can for get about that additional styling.

#borderText {
border-bottom: 1px solid white;
transition: .5s;
display: inline;
cursor: pointer;
}

#borderText:hover {
border-bottom: 1px solid black;
}

#textDecor {
text-decoration: none;
transition: .5s;
}

#textDecor:hover {
text-decoration: underline;
}
<p id=”borderText”>
Lorem Ipsum Sit Amet<br />
Some other Text<br />
Some Other Text<br />
</p>

<p id=”textDecor”>
Here is some text<br />
with text-decoration and<br />
as you should see, the text<br />
is underlined but cannot be transitioned<br />
</p>

[Tom]

It should be quite easy to underline on hover only.

For example:

.entry-content a {
    text-decoration: none;
}

.entry-content a:hover {
    text-decoration: underline;
}

Let me know if that’s not what you’re going for.

[Danny]

Hello Tom,

This works, thank you. How may I exclude buttons? Is it possible to thicken the line say 1px and distance it from the text?

[Tom]

If you want more control over the underline, this might be better:

.entry-content a:not(.button) {
    border-bottom: 2px solid transparent;
}

.entry-content a:not(.button):hover {
    border-bottom: 2px solid #222222;
}

[Danny]

Hello Tom,

Thanks, almost there. Can this code be made to inherit the primary color for the underline?

[Tom]

Try replacing #222222 with currentColor.

[Author]

Posts