: after не относится к родственникам родителей

Question

У меня есть: после для моей анимации, как вы можете видеть, она не ограничена родственником.То, что я хочу, это то, что полоса должна начинаться с ширины самой полосы, теперь она слева.В чем здесь проблема?

.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

попробуйте проверить: после 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;
  }
}

Answer 2

не используйте transform: translateX(-100%), оно начнется снаружи слева от вашего .loading и добавит left: 0

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