браузер safari - псевдоэлемент ": after" по-прежнему отображается без содержимого

Question

У меня есть следующий стиль

  .c-breadcrumb-item {
    display: inline-block;
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba($base-color, 0.5);

    &:not(:nth-last-child(2)) {
      .c-breadcrumb-link {
        color: rgba($base-color, 0.5);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
        &:active {
          color: $base-color;
          text-decoration: underline;
        }
      }

      &:after {
        content: '>';
        padding: 0 4px;
      }
    }

    &:nth-last-child(2) {
      animation: fadeIn 0.4s;
      .c-breadcrumb-link {
        color: $sky-blue;
      }
    }
  }

исходное состояние, как и ожидалось, без второго после элемента из последнего

<div class="c-breadcrumb" data-test="c-breadcrumb">
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
  **<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">Region number 2</a></span>**
  <span class="c-padding-simulate"></span>
</div>

, но проблема заключается в том, когда я удаляю один элемент крошки, элемент after, все еще видимый с box-sizing: border-box

<div class="c-breadcrumb" data-test="c-breadcrumb">
  **<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>**
  <span class="c-padding-simulate"></span>
</div>

, пожалуйста, помогите мне решить его