Safari浏览器:after伪元素无内容仍可见的面包屑样式问题求助

嘿，这个问题我之前也碰到过，核心是你的CSS选择器逻辑在面包屑项数量变化时，没考虑到边界场景（比如只剩一个项的情况），咱们一步步来修复它：

问题根源 #

你原CSS里用:not(:nth-last-child(2))控制伪元素显示，但这个选择器依赖父元素里的子元素数量（包括那个.c-padding-simulate占位元素）。当移除一个面包屑项后，如果占位元素的位置或存在状态变化，就会导致:nth-last-child(2)的匹配逻辑失效，让不该显示的伪元素箭头冒出来。

另外，原写法只给需要显示箭头的项设置了:after样式，却没明确隐藏不需要显示的项的伪元素，在box-sizing: border-box这类布局场景下，浏览器默认渲染行为可能会让伪元素意外显示。

可靠的解决方案 #

推荐换一种更健壮的写法：只在相邻的面包屑项之间添加箭头，用相邻兄弟选择器控制，完全不受其他非面包屑元素影响，逻辑更清晰：

.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);

  // 给所有面包屑链接设置基础样式
  .c-breadcrumb-link {
    color: rgba($base-color, 0.5);
    cursor: pointer;

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

  // 给"当前页前一项"设置特殊样式（对应你原来的:nth-last-child(2)）
  &:nth-last-child(2) {
    animation: fadeIn 0.4s;
    .c-breadcrumb-link {
      color: $sky-blue;
    }
  }
}

// 关键：只在两个面包屑项之间添加箭头
.c-breadcrumb-item + .c-breadcrumb-item:before {
  content: '>';
  padding: 0 4px;
  color: rgba($base-color, 0.5);
}

为什么这个写法更好？ #

• 箭头只会出现在两个面包屑项之间，不管添加/移除多少个项，最后一个面包屑项后面永远不会有多余箭头；
• 完全不依赖父元素里的其他占位元素（比如.c-padding-simulate），布局变化时不会出错；
• 逻辑更直观，后期维护起来更容易。

如果你想保留原选择器逻辑 #

要是不想大改代码，也可以给:nth-last-child(2)的伪元素明确设置隐藏：

.c-breadcrumb-item {
  // ... 原有样式 ...

  &:not(:nth-last-child(2)) {
    .c-breadcrumb-link {
      // ... 原有样式 ...
    }
    &:after {
      content: '>'; // 注意这里用'>'而非'>'，后者会输出字符串而非符号
      padding: 0 4px;
    }
  }

  &:nth-last-child(2) {
    animation: fadeIn 0.4s;
    .c-breadcrumb-link {
      color: $sky-blue;
    }
    // 明确隐藏伪元素
    &:after {
      display: none;
      content: '';
    }
  }
}

内容的提问来源于stack exchange，提问作者Gilad Tamam