diff options
-rw-r--r-- | scss/_breadcrumb.scss | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index d5fba04a40..1a09bba20a 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -19,18 +19,17 @@ 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. + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `<ul>`s. The `::before` pseudo-element generates an element + // *within* the .breadcrumb-item and thereby inherits the `text-decoration`. + // + // To trick IE into suppressing the underline, we give the pseudo-element an + // underline and then immediately remove it. + .breadcrumb-item:hover::before { - text-decoration: underline; // Part 1 of IE9-11 hack to suppress the underline + text-decoration: underline; } + .breadcrumb-item:hover::before { - text-decoration: none; // Suppress underlining of the separator in IE9-11 (requires an earlier setting of `text-decoration:underline`) + text-decoration: none; } &.active { |