Блог

Главная - Вопросы по программированию - : after не имеет области видимости по отношению к родительскому

: after не имеет области видимости по отношению к родительскому

#css

#css

Вопрос:

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

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

  amp;::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

Ответ №1:

Попробуйте добавить overflow:hidden в .loading

кроме того, вы можете видеть, что это хорошо работает с изменением ::after ‘ background-color 

 .loading {
  position: relative;
  background-color: #E2E2E2;
  overflow: hidden;
  amp;::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;
  }
}

Комментарии:

1. он все еще не начинается с самой панели.

2. @Hanz, потому что вы используете transform: translatex() .

3. итак, каково решение?

Ответ №2:

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

 .loading { 
  position: relative;
  background-color: #E2E2E2;
  overflow: hidden;
  amp;::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;
  }
}