.govuk-back-link {

  @include core-16;
  color: $text-colour;
  display: inline-block;
  position: relative;
  margin-top: $gutter-half;
  margin-bottom: $gutter / 3;
  padding-left: $gutter-half - 1px;
  border-bottom: 1px solid $text-colour;
  text-decoration: none;

  &:link,
  &:visited {
    color: $text-colour;
  }

  &:before {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    border-width: 5px 6px 5px 0;
    border-right-color: inherit;
    content: "";
    position: absolute;
    top: -1px;
    bottom: 1px;
    left: 0;
    margin: auto;
  }
}

.govuk-back-link {

  @include core-16;
  color: $text-colour;
  display: inline-block;
  position: relative;
  margin-top: $gutter-half;
  margin-bottom: $gutter / 3;
  padding-left: $gutter-half - 1px;
  border-bottom: 1px solid $text-colour;
  text-decoration: none;

  &:link,
  &:visited {
    color: $text-colour;
  }

  &:before {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    border-width: 5px 6px 5px 0;
    border-right-color: inherit;
    content: "";
    position: absolute;
    top: -1px;
    bottom: 1px;
    left: 0;
    margin: auto;
  }

  &:after {
    content: "";
    position: absolute;
    top: -$gutter-half;
    left: -3px;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: $gutter-half $gutter $gutter-half 3px;
    border-color: transparent;
  }

  &:focus {
    &:after {
      border-color: $yellow
    }
  }
}

Increase hit area of back link
Increase hit area of back link

The GOV.UK Design System back link component is sized (roughly) to the
contain the text and icon. Presumably this is so it’s safe to use in
various contexts.

Since we have control over the context is which it’s used, we can get
away with making the click area larger – in accordance with Fitt’s law –
without risking overlapping other page elements.
