Как объяснить данный код?

Question

[art style]

.tl-item {
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 100vh;
  min-height: 600px;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s ease;
  
  &:before, &:after {
    transform: translate3d(0, 0, 0);
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
  }

  &:after {
    background: transparentize(#031625, 0.15);
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  &:before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, 0, 0) translateY(50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

https://codepen.io/jeffglenn/pen/KNYoKa/

как это получается что сначала &:before, &:after вместе
а потом все раздельно?
и как :before, &:after прописать в одно состояние?

Comments

[uRoot]

Общие стили для before и after: &:before, &:after , а потом уникальные для каждого псевдоэлемента

[art style]

CryNet, понял.
а как их записать в ряд, ? просто &:before, &:after ??? делаю через билдер

[Andrew]

art style, через какой билдер?
Это препроцессор, где & заменяет элемент на 1 уровень выше, в вашем примере

.tl-item:before,.tl-item:after{
    transform: translate3d(0, 0, 0);
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

[art style]

Andrew, oxygen builder,
т.е. я смело пишу состояния для эл-та :before и :after, но там так же есть и hover элемент, его как записать? :hover:after ?

[Andrew]

art style,
https://jsfiddle.net/kickerock/kgqad7fz/1/
Да

.el:hover:after{
}

Answer 1

[Stalker_RED]

А в чем проблема?