Stretched link updates (#28958)

- Remove IE10 background hack
- Ability to change the pseudo element
- Ability to change the z-index
- Remove pointer events, just inherit this

2 files changed, 5 insertions, 6 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9eea07d399..29961e4dd5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -161,6 +161,9 @@ $link-hover-decoration:                   underline !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
 
+$stretched-link-pseudo-element:           after !default;
+$stretched-link-z-index:                  1 !default;
+
 // Paragraphs
 //
 // Style p element.
diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index fb5066bf55..71a1c755af 100644
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -3,17 +3,13 @@
 //
 
 .stretched-link {
-  &::after {
+  &::#{$stretched-link-pseudo-element} {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1;
-    // Just in case `pointer-events: none` is set on a parent
-    pointer-events: auto;
+    z-index: $stretched-link-z-index;
     content: "";
-    // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
-    background-color: rgba(0, 0, 0, 0);
   }
 }