CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
Obsidian Age
Obsidian Age

Reputation: 42354

Why does Bootstrap's text-decoration:none not work?

QUESTION:

Why does Bootstrap not remove hyperlink underlines with its text-decoration: none?

BREAKDOWN:

By default, Bootstrap gives all hyperlinks text-decoration: none with the low-specificity CSS:

a {
  text-decoration: none;
}

However, this doesn't actually remove the default underline from hyperlinks:

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">Should have no text-decoration</a> (through Bootstrap)
</body>

There are no rules with higher specificity than text-decoration: none. In fact, there are no other rules affecting text-decoration at all. When Bootstrap is removed, and the same CSS is added in its place, the text-decoration is removed:

a {
  text-decoration: none;
}
<a href="#">Should have no text-decoration</a> (inline)

Bootstrap also seems to take 'priority' with this behaviour; when you use the above CSS in conjunction with Bootstrap, it doesn't matter whether your declaration has more specificity or not; links will still be underlined:

a, div a {
  text-decoration: none;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">Bootstrap has higher specificity</a>
  <div>
    <a href="#">Inline CSS has higher specificity</a>
  </div>
</body>

It's interesting to note that adding !important removes the decoration, even though there are no 'more specific' declarations:

a {
  text-decoration: none !important;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">!important</a>
</body>

So why does Bootstrap not remove the default hyperlink underline with its implementation of text-decoration: none?

Upvotes: 3

Views: 10541

Answers (2)

ricotheque
ricotheque

Reputation: 159

Despite what you said, there's a CSS rule in your project that's overriding Bootstrap's text-decoration: none. The links in your demo code behaves properly.

It might be your browser settings

If loading your page on a different browser fixes things, this is the case. Some browsers allow users to override specific CSS styles.

It might be another CSS file

Load the page on Google Chrome. Right-click on the link, then click on "Inspect Element". You'll see all CSS rules in effect, including one that prevents Bootstraps text-decoration: none from working.

Upvotes: 0

hellojason
hellojason

Reputation: 314

I assume you're referring to the underline when you hover over the link, since that is the only thing that seems to not be working.

The answer is simple: you are not targeting the hover state. It's also usually recommended to treat the focus state as well, for keyboard navigation. Try this...

a, a:hover, a:focus {
    text-decoration: none;
}

Upvotes: 7

Related Questions