css - :after doesn't scope by relative of parent

Question

我的动画有 :after，如您所见，它不受相对范围限制。我想要的是条形应该从条形本身的宽度开始，现在是从最左边开始。这里有什么问题？

.loading {
    position: relative;
  background-color: #E2E2E2;

  &::after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    animation: loading 1s infinite;
  }
}

https://media.giphy.com/media/Vek3fMxjoA4qxGveZr/giphy.gif

尝试检查此演示中的 :after DOM https://codepen.io/eldyvoon/pen/vMVgaO

Answer 1

尝试将overflow:hidden添加到.loading

此外，您可以看到它在更改 ::after' background-color

时效果很好

.loading {
  position: relative;
  background-color: #E2E2E2;
  overflow: hidden;
  &::after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(100, 255, 255, .4), transparent);
    animation: loading 1s infinite;
  }
}