Can't remove text decoration

Question

Yes, I know this has been asked and answered but I can't get this working no matter what I try.

I need to remove the text decoration on a link that I have applied to a div.

The code looks like this:

#about-con a {
  text-decoration: none !important;
}
div #about-con a:link {
  text-decoration: none;
}
#about {
  position: relative;
  width: 100px;
  height: 1.5em;
  font-size: 1.125em;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border: 1.5px;
  border-style: solid;
  border-color: black;
}

<div id="about-con">
  <a href="http://ptunitedbrochure.bkm-tech.com/about.php">
    <div class="inline-nav" id="about">
      <div style="margin-top: 2px; text-align: center">
        About Us
      </div>
    </div>
  </a>
</div>

`div #about-con a:link` doesn't match anything in the markup you've provided. Did you mean `div#about-con a:link`? — André Dion, Aug 10 '16 at 18:10
Running that code doesn't show text-decoration on the link. What are you asking? — TW80000, Aug 10 '16 at 18:11
Also remove the :link at the end as it specifies unvisited links only. — Peter, Aug 10 '16 at 18:12
The code you provided works. https://jsfiddle.net/8565b4ka/ I think it might be a browser cache problem. Clear the cache, refresh the page and that should do the trick — Denis Kumbaradzi, Aug 10 '16 at 18:13
@ Andre Dion yea and no, i have tried both together and spaced. nothing seems to work. — dvitt90, Aug 10 '16 at 18:13
can you describe 'nothing seems to work' better? - I am not sure which decorations you want to remove. Do you mean the border around 'About Us'? — blurfus, Aug 10 '16 at 18:14
It looks to me like the first #about-con a does the job, its only the colour that remains which you can change ofcoz. Decoration refers to the underline below and that is already removed by the first class — yanguya995, Aug 10 '16 at 18:17
I don't see any text decoration. I suspect this might be a dupe of [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/q/1823341/1529630) — Oriol, Aug 10 '16 at 18:19

score 0 · Answer 1 · answered Aug 10 '16 at 18:41

Instead of this:

div #about-con a:link {
  text-decoration: none;
}

Place this:

#about-con a:hover{
  text-decoration: none;
  color: #337ab7;
}

This will make your link text stay the same on hover. Now, if you are talking about the border around the "About Us", you will have to remove border properties from your #about div.

Can't remove text decoration

1 Answers1