[Solved] Text-decoration underline not removing

[Clare12345]

Hi,

I’m trying to remove a text-decoration: underline from a word using CSS, but I’m having trouble.

See my Codepen: http://codepen.io/Clare12345/pen/gpYdjo

Here is my HTML:

<a href="/"><div class="holder">
<div class="word one">one</div>
<div class="avatar"> </div>
<div class="word two">two</div>
</div></a>

And here is my CSS:

`.holder {
vertical-align: top;
overflow: auto;
}
.holder .avatar {
margin: 25px auto;
height: 75px;
width: 75px;
background-color: #FFBF00;
box-shadow: 0 0 0 5px #FFBF00;
border-radius: 50%;
float: left;
margin-right: -30px;
}
.holder .avatar:hover, .holder .avatar:hover {
cursor: pointer;
-moz-animation: bounceOut .5s linear;
-webkit-animation: bounceOut .5s linear;
}

.word {
margin-top: 55px;
}
.word a {
color: #222;
text-decoration: none!important;
}
.word a:hover {
color: #222;
text-decoration: none!important;
}
.one {
float: left;
font-family: ‘Open Sans Condensed’;
font-size: 30pt;
margin-right: -30px;
position: relative;
z-index: 1000000000000;
color: #222;
text-decoration: none;
}
.two {
font-family: ‘Open Sans Condensed’;
font-size: 30pt;
position: relative;
z-index: 1000000000000;
color: #222;
text-decoration: none;
}
.one:hover, .two a:hover, .one a:hover, .two, .holder:hover, .holder a:hover, .avatar a:hover {
text-decoration: none!important;
}
.holder a:hover {
.two a {
text-decoration: none!important;
} }

`

On my end word two has an underline under it when I hover over it (in WordPress) and without hovering in Codepen.
Anybody have any idea how to remove it??

Thank you so much ahead of time!!!!

[Clare12345]

Nevermind, I fixed it with

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

Thank you!!!!

[Author]

Posts