1

One of my pet peeves is no underlines on links in body text. I wish there was a way in customizer (on GetBootstrap.com) to just exclude components from getting underlined, but the rest is underlined. Or a prefix that can be targeted. In Bootstrap, if I am not touching the css, I'm usually doing the following in another style sheet.

Any better ideas?

/* ---- everything has an underline by default */
a {
  text-decoration:underline; 
}

/* ---- removing underlines on bootstrap components */
a.btn,
.nav a:not(:hover),
.navbar a:not(:hover),
.pagination a:not(:hover),
.pager a:not(:hover),
.list-group a:not(:hover),
.breadcrumb a:not(:hover) {
    text-decoration:none;
}
.nav a:hover,
.navbar a:hover,
.list-group a:hover,
.breadcrumb a:hover {
    text-decoration:underline;
}
Christina
  • 34,296
  • 17
  • 83
  • 119
  • What's wrong with using simply `a` selector instead of `a:not(:hover)`? Then overriding text declaration for `:hover` pseudo class? – Hashem Qolami Sep 20 '14 at 20:24
  • @HashemQolami Now I see why I have that the way I do. All links in bootstrap are not underlined, but when they hover they are underlined, that's why I have it that way. I am just putting back the default behavior. I'm thinking I'll just add a custom class on any bootstrap component, that might be less messy. – Christina Sep 20 '14 at 20:32
  • @HashemQolami Ahhh, yes that will do the trick and shorten the css – Christina Sep 20 '14 at 20:58
  • @Christina I meant targeting `.nav a, .navbar a, ...` and so on not the all `a` elements. You might also want to [group the selectors by `:any()`](http://stackoverflow.com/questions/25285518/how-to-target-a-group-of-long-similar-css-selectors-on-one-line/25286385#25286385) pseudo class, but it's worth noting that it's an experimental technology, and W3C standard `:matches()` selector is not supported in any web browser. *(deleted the previous comment to correct typos)* – Hashem Qolami Sep 20 '14 at 21:00

0 Answers0