[css] Text-decoration: none not working

Totally baffled! I've tried rewriting the text-decoration: none line several different ways. I also managed to re-size the text by targeting it but the text-decoration: none code will not take.

Help much appreciated.

Code

_x000D_
_x000D_
.widget    _x000D_
{_x000D_
     height: 320px;_x000D_
     width: 220px;_x000D_
     background-color: #e6e6e6;_x000D_
     position: relative;                              _x000D_
     overflow: hidden;                          _x000D_
}_x000D_
_x000D_
_x000D_
.title    _x000D_
{_x000D_
     font-family: Georgia, Times New Roman, serif;_x000D_
     font-size: 12px;_x000D_
     color: #E6E6E6;_x000D_
     text-align: center;_x000D_
     letter-spacing: 1px;_x000D_
     text-transform: uppercase;_x000D_
     background-color: #4D4D4D;    _x000D_
     position: absolute;_x000D_
     top: 0;_x000D_
     padding: 5px;_x000D_
     width: 100%;_x000D_
     margin-bottom: 1px;_x000D_
     height: 28px;_x000D_
     text-decoration: none;_x000D_
}_x000D_
_x000D_
a .title    _x000D_
{_x000D_
     text-decoration: none;_x000D_
}
_x000D_
<a href="#">_x000D_
    <div class="widget">  _x000D_
        <div class="title">Underlined. Why?</div>  _x000D_
    </div>_x000D_
</a>
_x000D_
_x000D_
_x000D_

This question is related to css html text-decorations

The answer is


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

=> Working with me :) , good luck


I have an answer:

<a href="#">
    <div class="widget">  
        <div class="title" style="text-decoration: none;">Underlined. Why?</div>  
    </div>
</a>?

It works.


if you want a nav bar do

ul{ list-style-type: none; } li{text-decoration: none;
  • This will make it want to make the style of the list type to None or nothing

with the < a > tag:

a:link {text-decoration: none}

Try placing your text-decoration: none; on your a:hover css.


Add a specific class for all the links :

html :

<a class="class1 class2 noDecoration"> text </a>

in css :

.noDecoration {
  text-decoration: none;
}

try adding this to your stylesheet:

a {text-decoration:none;}

Use CSS Pseudo-classes and give your tag a class, for example:

<a class="noDecoration" href="#">

and add this to your stylesheet:

.noDecoration, a:link, a:visited {
    text-decoration: none;
}

As a sidenote, have in mind that in other cases a codebase might use a border-bottom css attribute, for example border-bottom: 1px;, that creates an effect very similar to the text-decoration: underline. In that case make sure that you set it to none, border-bottom: none;


I just did it the old way i know that its not right but its a quick fix.

<h1><a href="#"><font color="#FFF">LINK</font></a></h1>

Add this statement on your header tag:

<style>
a:link{
  text-decoration: none!important;
  cursor: pointer;
}
</style>

There are no underline even I deleted 'text-decoration: none;' from your code. But I had a similar experience.

Then I added a Code

a{
 text-decoration: none;
}

and

a:hover{
 text-decoration: none;
}

So, try your code with :hover.


I had lots of headache when I tried to customize a WordPress theme and the text-decoration didn't help me. In my case I had to remove the box-shadow as well.

a:hover {
    text-decoration: none;
    box-shadow: none;
} 

I used the code below to get mine to work in Chrome. You can adjust the nesting:

a:-webkit-any-link { color: black; }