diff options
author | Mark Otto <markdotto@gmail.com> | 2016-01-18 02:50:27 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2016-01-18 02:50:27 +0300 |
commit | 2f4af5c2955224faaa81fc0c1d558a990f3d4b2c (patch) | |
tree | 5274fdbdbfacd6f012522b775031a9787beed66f /scss/_breadcrumb.scss | |
parent | 8a0b8b6b032933c990d2cbdfaf3c424c25658840 (diff) |
condense that comment, clean up formatting
Diffstat (limited to 'scss/_breadcrumb.scss')
-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 { |