[Resolved] New Link Underline (Wired-Style)

[J]

I would like to add the following CSS to spruce up the hyperlinks in a post:

/* this is the magic */
a {
text-decoration:none;
border-bottom: 2px solid #ef8b80;
box-shadow: inset 0 -4px 0 #ef8b80;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

a:hover {
background: #ef8b80;
}

But when I do, it also adds the effect on everything in the header, which I don’t want. I just want the effect on the hyperlinks in the post body.

Any ideas on how to change the code for this to happen?

Thank you.

[Leo]

Hi there,

Try this:

.entry-content a {
    text-decoration:none;
    border-bottom: 2px solid #ef8b80;
    box-shadow: inset 0 -4px 0 #ef8b80;
    color: inherit;
    transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

.entry-content a:hover {
    background: #ef8b80;
}

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

[J]

That works great for the hyperlinks, but when I hover over any paragraph or object, the background changes also.

Thank you.

[Leo]

Made it mistake in the CSS before.

Try the edited code here:
https://generatepress.com/forums/topic/new-link-underline-wired-style/#post-2319312

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

[J]

That works great. Thanks so much. You can see the result here.

It would be wonderful if you could create a plugin for doing just this, with the only options for changing the underline and hover color. Until then, I’ll be adding the CSS code to every post.

Thanks again.

[Leo]

It would be wonderful if you could create a plugin for doing just this, with the only options for changing the underline and hover color.

That’s definitely not something we would do as changing the underline style is a rare request and should be handled with CSS when needed.

Until then, I’ll be adding the CSS code to every post.

The CSS code I provided would work for every post if you just add them through Additional CSS field in the customizer – no need to add it everytime.

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

[J]

Yeah, I didn’t think there would be a huge demand for something link this.

I’ll add the CSS code in the Simple CSS plugin.

Thanks again for working this code out for me.

[Leo]

No problem 🙂

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

[Author]

Posts