diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss index 5a1f99afc..2a70e87d6 100644 --- a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss +++ b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss @@ -22,8 +22,14 @@ list-style-type: none; line-height: 1.5; + // We use a pseudo element to add bullet points to related links. This + // makes the bullets clickable and highlights them on link hover. With + // this approach, IE8 erroneously applies the anchor tag's underline to + // the pseudo element. Specifying separate text-decoration rules for the + // anchor tag and a nested span fixes this. a { display: block; + text-decoration: none; &:before { content: "•"; @@ -32,7 +38,10 @@ margin-left: -15px; } } + + a span { + text-decoration: underline; + } } } - } diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb index a1463da75..b711fe68c 100644 --- a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb +++ b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb @@ -32,7 +32,6 @@
  • <%= link_to( - related_item[:title], related_item[:link], data: { track_category: 'relatedLinkClicked', @@ -42,7 +41,9 @@ track_dimension_index: 29, }, class: 'related-link', - ) + ) do + content_tag(:span, related_item[:title]) + end %>
  • <% end %>