CODEWITHSUNDEEP
htmlcsstwitter-bootstraphyperlink
user1642018
user1642018

Reputation:

Bootstrap custom CSS rule how to set text-decoration:none for hyperlink?

i am using twitter bootstrap css , and using some custom css to override few default rules. ,

but i am unable to remove the bottom border from a hyperlink ,

HTML

<footer>
<div class="row">
<div class="col-lg-12 footer">   
<nav>
<a href="" >first link</a>
<a href="" class="nounderline">second link</a>  
<a href="" class="nounderline"><i class="fa fa-facebook-square fa-2x"></i>     fb icon  </a> 
</nav>
</div>
</div>
</footer>

CSS

@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");


.footer a{
color: #000;
border-bottom: 1px dotted #000;
} 

.nounderline { text-decoration: none !important}

even though i have set class to .nounderline its still showing the underline on hyperlink.

i have tried inline specifying text-decoration: none !important

e.g. HTML

<a href="" class="nounderline" style="text-decoration: none !important;"><i class="fa fa-facebook-square fa-2x"></i>     fb icon  </a>

but still its showing the underline for the hyperlink.

how can i remove the underline from the hyperlink ?

http://jsfiddle.net/x4eetcve/

Upvotes: 1

Views: 1314

Answers (2)

anonymous
anonymous

Reputation: 4064

It has nothing to do with text-decoration in this case. There's a dotted border line on a element.

.footer a {
   color: #000;
   border-bottom: 1px dotted #000; 
}

Get rid of the border-bottom, then it will look okay.

I've updated your fiddle, check it out here http://jsfiddle.net/x4eetcve/1/

Warning

If you're using the footer a globally throughout pages like Bootstrap expects users to do, then you should override border-bottom on your a.underline.

Upvotes: 1

backerman
backerman

Reputation: 26

It isn't text-decoration, it is a bottom border. So use a slightly more specific selector and set border-bottom to none for your nounderline class.

example:

a.nounderline {
    border-bottom:none;
}

Upvotes: 1

Related Questions