diff --git a/scss/_badge.scss b/scss/_badge.scss
index 2e489a05b134a80834d1464d61422e7ac6ab4156..bdbe4b9cc8277572ceb35df7438f915feb66bc1d 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -14,7 +14,7 @@
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
 
-  &[href] {
+  @at-root a#{&} {
     @include hover-focus {
       text-decoration: none;
     }
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 535bcb4cc3686be6168e27231783f98f5d324848..cf99b3537a48278a8c6a621816004f16f94f27c7 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -2,7 +2,7 @@
   color: color-yiq($bg);
   background-color: $bg;
 
-  &[href] {
+  @at-root a#{&} {
     @include hover-focus {
       color: color-yiq($bg);
       background-color: darken($bg, 10%);