.govuk-breadcrumbs {
  padding-top: 0.75em;
  padding-bottom: 0.75em;

  ol {
    @extend %contain-floats;

    li {
      @include core-16;
      background-image: image-url("separator.png");
      background-position: 100% 50%;
      background-repeat: no-repeat;
      float: left;
      list-style: none;
      margin-left: 0;
      margin-right: 0.5em;
      margin-bottom: 0.4em;
      padding-right: 1em;

      @include device-pixel-ratio() {
        background-image: image-url("separator-2x.png");
        background-size: 6px 11px;
      }

      a {
        color: $text-colour;
      }

      &:last-child {
        background-image: none;
        margin-right: 0
      }
    }
  }
}

.govuk-breadcrumbs {
  padding-top: 0.75em;
  padding-bottom: 0.75em;

  ol {
    @extend %contain-floats;

    li {
      @include core-16;
      background-image: image-url("separator.png");
      background-position: 0% 50%;
      background-repeat: no-repeat;
      float: left;
      list-style: none;
      margin-left: 0.6em;
      margin-right: 0;
      margin-bottom: 0.4em;
      padding-left: 0.9em;

      @include device-pixel-ratio() {
        background-image: image-url("separator-2x.png");
        background-size: 6px 11px;
      }

      a {
        color: $text-colour;
      }

      &:first-child {
        background-image: none;
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}

Use first-child not last-child for IE8 support
Use first-child not last-child for IE8 support

IE8 doesn’t support last-child, that’s a CSS3 selector.

Switch around margin and padding, so that the image appears to the left
of each crumb, but it hidden on the first item. Tweak left margin so
that space left and right of divider is even.
