How could I remove the text-decoration when is active. I have the following code but the link is underlined

Question

Html code for my question.

This is a tab list based on a javascript. When i click one of the tabs the link still remains underlined, even if i coded text-decoration:none.

<ul class="tabet">
<li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year @</p>
<strong>$399.99</strong> 
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years @</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years @</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>
</li>
</ul>

css code for my question.

The css begins on from styling of the list until the links.

.tabet
{
float:left;
margin-top:5%;
margin-left:12%;
position:relative;
width:80%;
}
.tabet li  
{
display:inline;
margin: 2% 0 2% 5%;
float:left;
position:relative;
text-align:center;
}

.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
}

.tabet li a:hover
{
text-decoration:none;
text-align:center;
}
.tabet li a:active
{
color:#000;
text-decoration:none;
background-color:#CF0;
}

.vitetdesign
{
border:1px solid #178b1d;
padding:2% 5%;
background-color:#ececec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:120px;
}

.vitetdesign:hover
{
border:1px solid #454545;
padding:2% 5%;
background-color:#cecece;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.vitetdesign:active
{
background-color:#cecece;
border:1px solid #454545;
text-decoration:none!important;
}

Answer 1

If u dont need underline at all then put css like this

.tabet li a
{
     text-decoration:none;
}
.tabet li a:hover
{
     text-decoration:none;
}
you can add other styles as u wish such as color , font-family etc

Answer 2

a:focus, a:active, a:visited {
    text-decoration : none;
}

Answer 3

You must set text-decoration: none in class tabet li a

CSS

.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
text-decoration: none;
}

DEMO HERE

Answer 4

Use focus Fiddle

.tabet li a:focus {
color:#000;
text-decoration:none;
background-color:#CF0;
}

.tabet {
    float:left;
    margin-top:5%;
    margin-left:12%;
    position:relative;
    width:80%;
}
.tabet li {
    display:inline;
    margin: 2% 0 2% 5%;
    float:left;
    position:relative;
    text-align:center;
}
.tabet li a {
    font-size:20px;
    font-family:'Source Sans Pro', FontAwesome, sans-serif;
    text-align:center;
    color:#FB5E2C;
}
.tabet li a:hover {
    text-decoration:none;
    text-align:center;
}
.tabet li a:active {
    color:#000;
    text-decoration:none;
    background-color:#CF0;
}

.tabet li a:focus {
    color:#000;
    text-decoration:none;
    background-color:#CF0;
}
.vitetdesign {
    border:1px solid #178b1d;
    padding:2% 5%;
    background-color:#ececec;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:120px;
}
.vitetdesign:hover {
    border:1px solid #454545;
    padding:2% 5%;
    background-color:#cecece;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.vitetdesign:active {
    background-color:#cecece;
    border:1px solid #454545;
    text-decoration:
}

<ul class="tabet">
    <li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year @</p>
<strong>$399.99</strong> 
<p>per year</p>
</div></a>

    </li>
    <li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years @</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>

    </li>
    <li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years @</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>

    </li>
</ul>