Style all links on GP

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 :)

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.

Hey Leo,

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

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:

Hey Leo,

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

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.

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

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

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>

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.

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?

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

Hello Tom,

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

Try replacing #222222 with currentColor.