Link Behavior gone wild!

Support
#1

Hi Everyone,

I have quite an annoying issue which i am sure is due to my lack of experience with CSS specificity… I am trying to make it so that all of the text links on my site have this chunky underline and on hover it highlights the whole word. Its working great and exactly the way i want it, but its also happening on every image, breadcrumb, icon - basically anything clickable. I managed to remove it from the breadcrumbs but i haven’t found a way to remove it from the entry featured image and entry title, and on the icons everywhere (social media icons and even the search icon). On the homepage you can really see it everywhere - below all buttons and clickable elements. If you could help me to fix it so that only my text links get this underline effect that would be awesome!

p.s. The underlines are showing up in my WordPress admin area as well!

Here is the main code for the underline:
a:link {
background-color: transparent;
color: inherit;
text-decoration: none;
transition: background .15s cubic-bezier(.33,.66,.66,1);
box-shadow: inset 0 -3px 0 rgba(247, 157, 32, .5);
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
a:hover {
background-color: rgba(247, 157, 32, .5);
}

Thanks so much,
Jamie

#2

Hi Jamie,

Thank you for reaching out to us. A better approach would be create a new class for the links and assign it to only those links where you need it. For example you can add the following code globally via Theme Options > CSS:

.site-link {
background-color: transparent;
color: inherit;
text-decoration: none;
transition: background .15s cubic-bezier(.33,.66,.66,1);
box-shadow: inset 0 -3px 0 rgba(247, 157, 32, .5);
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
.site-link:hover {
background-color: rgba(247, 157, 32, .5);
}

Now assign this class site-link to the elements where you need it via Customize tab in Cornerstone (see screenshot below) or if you’re using HTML markup to add links then you can assign this class like this:

<a class="site-link" href="#">link</a>

Hope this helps!

#3

Thanks @Nabeel. This is really helpful, but what if i want all of my sites post tags and custom post tags and categories to have this class? How would i be able to do that?

#4

Hey Jamie,

You need to find the classes for post tags and categories to apply the CSS on those elements. For example to apply the CSS on the post tags, your code will be something like:

footer.entry-footer.cf a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    transition: background .15s cubic-bezier(.33,.66,.66,1);
    box-shadow: inset 0 -3px 0 rgba(247, 157, 32, .5);
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}
footer.entry-footer.cf a:hover {
    background-color: rgba(247, 157, 32, .5);
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.