如何从引导中的css删除悬停在下划线上的光标

Question

I am new to bootstrap and CSS

I am trying using the following snippet I found on Bootsnipp.

http://bootsnipp.com/snippets/xaWpR

(The link has the code and preview)

I have managed to change colour and fonts the way I want but how do I remove the underline effect from the tabs?

Thank you.

Answer 1

use outline:none; , this will fix your dot line issue , then use text-decoration:none to remove the default underline of anchor tag

.tabs nav li.tab-current a {
   outline:none;
}
.tabs nav a {
  text-decoration:none;
}

Answer 2

Set text-decoration to none upon hovering the links.

.tabs ul li a:hover {
  text-decoration: none;
}

Answer 3

It's always bad practice to edit the already assigned bootstrap styles.

Simply add class to your html element and edit the class.

Let's say you have:

<ul>
    <li>
         <a class="text-center custom_a"href="#">Link</a> 
    </li>
    <li>
         <a class="text-center custom_a"href="#">Link</a> 
    </li>
</ul>

Now some people edit the already predefined bootstrap class: text-center , which centers the text in the outer element, which is a really bad practice for several reasons:

• The final outputs depends on which styles will be loaded last.
• You will have to override the styles with !important, which should be avoided whenever and wherever possible.

Also you can travel through DOM:

ul li a {;}

Now imagine having several uls or lis. Then you will have to travel the DOM with pseudo-selectors. . Traveling takes more time to match the DOM element with style parameters.

In your case simply do this:

.custom_a, .custom_a_hover {text-decoration:none;}

Answer 4

You can use this because of remove underline for hover and focus.

.tabs nav a {
    text-decoration: none;
}

Answer 5

.tabs nav a {
    text-decoration: none;
}