CODEWITHSUNDEEP
htmlcsshyperlink
Ciarán J. Hagen
Ciarán J. Hagen

Reputation: 39

Removing underline on links on wordpress site. text-decoration: none; doesn't work

Before you mark me as duplicate: I've read all the similar questions and tried the solutions and either I'm too dumb to understand them (a valid possibility), or my problem is different, but they didn't work for me.

I was marked off-topic on wordpress forum since it is apparently a css/html problem, so I reposted here.

Now on to the problem:

I'm having trouble with removing the underlines of some links I have on my site. Here's my html definition of the links:

<p style="text-align: center;">
    <a class="buttonL" href="http://cns.uni.lu/homel">&lt;</a>
    <a class="buttonR" href="http://cns.uni.lu/homer">&gt;</a>
</p>

And my CSS from the "custom CSS" page:

.buttonL {
    border-radius: 50%;
    position:fixed;
    top: 50%;
    left: 0%;
    background-color: transparent;
    border: none;
    color: grey;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 50px;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: 900;
}

.buttonR {
    border-radius: 50%;
    position:fixed;
    top: 50%;
    right: 0%;
    background-color: transparent;
    border: none;
    color: grey;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 50px;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: 900
}

I know it's redundant and inelegant. No use commenting on that. I can make it more elegant later.

For some reason, there is a line underneath the links, that won't go away. I've tried using

text-decoration:none !important;

, but to no avail. I've applied it on .buttonL, .buttonR, a, .buttonL a, .buttonR a, .buttonL:link, .buttonL:active, .buttonR:link, .buttonR:active, .buttonL a:link, .buttonL a:active, .buttonR a:link, .buttonR a:active.

I've also tried doing

border-bottom: none;

and

box-shadow: none;

, also to no avail.

Any ideas as to what I'm doing wrong?

P.S. I can't link the page I'm referencing, as it is on an internal network. Sorry...

Here's a screenshot of the page: The links in question are the arrows to either sides. Although the other links have the same problem.

Upvotes: 1

Views: 2579

Answers (4)

David
David

Reputation: 1

A right-click-inspect might reveal that you do not have an underline issue, but rather:

box-shadow: 0 1px 0 0 currentColor;

If that is the case (it was for me), then:

box-shadow:none; /* worked just fine for me. */

Upvotes: 0

Ciar&#225;n J. Hagen
Ciar&#225;n J. Hagen

Reputation: 39

I just found the solution:

For some reason the background gradient (although it was white) left a line at the backgrounds border (or center - I'm not sure). To remove this, I added

.entry-content a{background-image:none;}

to the css file, instead of just making it transparent.

Thanks for all the help :D

Upvotes: 1

Vidya
Vidya

Reputation: 126

If the css is not working means then use jquery

<script>
    $(document).ready(function(){
        $('.buttonL').css('text-decoration','none');
        $('.buttonR').css('text-decoration','none');
    });
<script>

I hope this will solve your issue.

Upvotes: 0

Ashar Zafar
Ashar Zafar

Reputation: 402

Use This CSS may be help you thanks 

   body .buttonL, body .buttonR {
        text-decoration: none !important;
    }

OR USE THIS

   body a{
        text-decoration: none !important;
    }

Upvotes: 1

Related Questions