Концепция псевдоэлементов :: after и :: before в CSS при использовании overlay / background-color? - PullRequest
Новая
       105

Концепция псевдоэлементов :: after и :: before в CSS при использовании overlay / background-color?

0 голосов
/ 29 мая 2020 
.child
{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('/imgs/hodzz.jpg');
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease-in-out;

    &::before
    {
        content: "";
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        transition: all 0.5s ease-in-out;
    }


     &:hover
    {
        &::before
        {
            opacity: 1;
            transition: all 0.75s ease-in-out;
        }

    }
}

В этом коде у меня есть фоновое изображение для элемента с классом child. Концепция, лежащая в основе этого кода, заключается в том, что когда я наведите над элементом, я хочу, чтобы отображался оверлей (этот оверлей создается в :: before).

Я заметил, что даже если Я создаю этот оверлей с помощью & :: after, получаю тот же результат.

В чем в этом случае разница между :: after и :: before?

Разве оверлей не должен отображаться в :: before, потому что он находится позади изображения? Не ясны ли мои представления о :: до и :: после?

...