rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18789 from twbs/fix-18733-more

Browse Source 
Prevent breadcrumb separator from getting underlined on hover when not using <ol> markup
This commit is contained in:
Mark Otto 2016-01-17 15:45:02 -08:00
commit 8a0b8b6b03
1 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_breadcrumb.scss
View File

@ -10,13 +10,29 @@
.breadcrumb-item { .breadcrumb-item {
float: left; float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before { + .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding; padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding; padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color; color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}"; content: "#{$breadcrumb-divider}";
} }
// When not using <ul> markup, browsers normally underline the ::before pseudo-element
// (the separator between the breadcrumbs) when the user hovers over its originating breadcrumb <a> element.
// In modern browsers, this underline can be suppressed by setting `display:inline-block` on the pseudo-element.
// (Why doesn't simply setting `text-decoration:none` on the pseudo-element work? Because that's how text-decoration propagation has been spec'd in CSS.)
// IE9-11 suffer from a bug which prevents that solution from working.
// For them, we apply a hack where we first set `text-decoration:underline` and then later set `text-decoration:none`, both on the pseudo-element.
// This tricks IE into suppressing the underline.
+ .breadcrumb-item:hover::before {
text-decoration: underline; // Part 1 of IE9-11 hack to suppress the underline
}
+ .breadcrumb-item:hover::before {
text-decoration: none; // Suppress underlining of the separator in IE9-11 (requires an earlier setting of `text-decoration:underline`)
}
&.active { &.active {
color: $breadcrumb-active-color; color: $breadcrumb-active-color;
} }