How to explain this code?

.tl-item {
 transform: translate3d(0, 0, 0);
 position: relative;
 width: 25%;
 height: 100vh;
 min-height: 600px;
 color: #fff;
 overflow: hidden;
 transition: width 0.5 s 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.5 s 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.5 s ease, transform 0.5 s ease;
 }

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

how is it that at first &:before, &:after together
and then it all separately?
and as :before, &:after to register in one state?
5df9a235b60ad107187987.png
April 3rd 20 at 18:29
1 answer
April 3rd 20 at 18:31
Solution

Find more questions by tags CSS