CODEWITHSUNDEEP
htmlcsswordpress
hacksoi
hacksoi

Reputation: 1399

Link underline won't to go away

I'm writing a plugin for WordPress and when I add a link, the underline won't go away. The theme I'm using is twentysixteen. Here is my html:

<a class="thisisunique" href="#" style="text-decoration:none;">some text</a>

I'm astounded that this doesn't work, since the text-decoration is even inlined. I also included this in my CSS:

a.thisisunique, a.thisisunique:link, a.thisisunique:visited, a.thisisunique:hover, a.thisisunique:active, a.thisisunique:focus {
    text-decoration: none !important;
}

I even included code from a developer of the theme (https://wordpress.org/support/topic/remove-underline-from-links-2/), who explained that the theme doesn't use text-decoration, but border-bottom to achieve underlines (for whatever reason):

.entry-content a, .entry-summary a, .page-content a, .comment-content a, .pingback, .comment-body > a, .textwidget a {
    border-bottom: none;
}

but alas, that confounded underline remained.

What's also odd is that when I do text-decoration: overline;, it actually adds the overline to the link.

What in the world am I missing?

Upvotes: 3

Views: 2710

Answers (3)

sdailey
sdailey

Reputation: 2030

Experienced web dev here. The other day I ran into this exact issue, where links in a Wordpress page were receiving underlines despite me providing inline CSS that set text-decoration to none. It was befuddling, b/c I couldn't even see in the browser's dev tools where this CSS was being overwritten - in fact, it said the "text-decoration: none" was being properly applied.

I eventually found CSS that prevented the link underline from occurring, though it did not make sense, and no one on the internet was mentioning it could even be an issue. It had to do with borders, like so:

border: 1px solid transparent;

I essentially needed to create an invisible border around the link element for it to not have text decoration.

An example of this CSS working can be found here -- look at the green button and the image above it, both had underlines inserted on them until I added an invisible border.

Upvotes: 0

P Sebastian
P Sebastian

Reputation: 28

try to make the styles more specific like: .widget-area .widget .link-style-1:visited { color: green; } If possible share the location of the link.. 

    { parent. a.thisisunique, 
    parent. a.thisisunique:link, 
    parent. a.thisisunique:visited, 
    parent. a.thisisunique:hover, 
    parent. a.thisisunique:active, 
    parent. a.thisisunique:focus {
    text-decoration: none !important;
    }

Upvotes: 0

hacksoi
hacksoi

Reputation: 1399

I'll tell you what you're missing!:

.entry-content a,
.entry-summary a,
.taxonomy-description a,
.logged-in-as a,
.comment-content a,
.pingback .comment-body > a,
.textwidget a,
.entry-footer a:hover,
.site-info a:hover {
    box-shadow: 0 1px 0 0 currentColor;
}

Where box-shadow: 0 1px 0 0 currentColor; is the son of a gun responsible for all this!

What the heck is a box-shadow? WHY???

This is what I found after digging through my entire WordPress directory for an hour. The code above is in the theme's style.css file. Anyways, just doing 

box-shadow: none;

finally got rid of that darn underline.

Upvotes: 2

Related Questions