Update no-underline modifier/mixin to work in IE11

IE11 does not support the CSS Text Decoration Module Level 3 ‘text-decoration styling’ properties [1] [2], and only recognises `text-decoration` as a regular property with values of none, underline, etc – as defined in CSS2 [3].

As such, using `text-decoration-line` to ‘unset’ the underline does not work in IE11. We want to avoid re-setting the `text-decoration` property because when treated as shorthand (in browsers that support `text-decoration-styling` this resets the `text-decoration-thickness` property to `auto`.

Instead, use `:not(:hover):not(:active)` to remove the text-decoration except when hovered/active. `:not` is supported in IE9 and above. This means that the `no-underline` mixin / modifier will have no effect in IE8.

Unfortunately the pseudo-class plugin we use to display links in different states does not correctly handle `:not` when used like this, so the examples in the links page do not render correctly. Revert the changes to this example, adding a simpler example instead.

[1]: https://www.w3.org/TR/css-text-decor-3/#text-decoration
[2]: https://caniuse.com/text-decoration
[3]: https://www.w3.org/TR/2009/CR-CSS2-20090908/text.html#propdef-text-decoration

app/views/examples/links/index.njk

@@ -17,10 +17,6 @@
   'Muted link': 'govuk-link--muted'
 } %}
 
-{% set modifiers = {
-  'with no underline': 'govuk-link--no-underline'
-} %}
-
 {% set states = {
   'Link': ':link',
   'Visited link': ':visited',
@@ -47,6 +43,10 @@
         (<a class="govuk-link" href="#">Link with surrounding brackets</a>) test that the focus style does not overlap.
       </p>
 
+      <p class="govuk-body">
+        <a class="govuk-link govuk-link--no-underline" href="#">Link with no underline</a>
+      </p>
+
     {% for variant_description, variant_class in variants %}
 
       <section class="govuk-!-margin-top-8">
@@ -59,18 +59,6 @@
           </a>
         </p>
       {% endfor %}
-
-        {% for modifier_description, modifier_class in modifiers %}
-        <h3 class="govuk-heading-m">{{ modifier_description }}</h2>
-
-        {% for state_description, state_class in states %}
-          <p class="govuk-body">
-            <a href="/#{{ randomPageHash }}" class="govuk-link {{ variant_class }} {{ modifier_class }} {{ state_class }}">
-              {{ state_description}}
-            </a>
-          </p>
-        {% endfor %}
-      {% endfor %}
       </section>
     {% endfor %}
 

src/govuk/helpers/_links.scss

@@ -288,16 +288,7 @@
 /// @access public
 
 @mixin govuk-link-style-no-underline {
-  &:link {
-    text-decoration-line: none;
-  }
-
-  &:hover,
-  &:active {
-    text-decoration-line: underline;
-  }
-
-  &:focus {
+  &:not(:hover):not(:active) {
     text-decoration: none;
   }
 }