Почему не отображается с двух сторон градиент?

Question

[Елена]

Нужно сделать с двух сторон градиент, но почему-то отображается с одной. Правильно ли я понимаю, что он первый просто перекрывает или здесь в другом причина? Как сделать чтоб с обоих сторон был градиент?
https://codepen.io/Ponomareva1994/pen/bGwyvrG?edit...

Answer 1

[Ankhena]

Просто задайте фон блоку

.gradient {
background: linear-gradient(to left, rgba(1, 6, 17, 0.7) 10%, transparent 25%, transparent 75%, rgba(1, 6, 17, 0.7) 90%);
}

А у вас не отображается, потому что вы перебили фон.
Сделали не два псевдо к разным элементам, а один. От того, что вы обращаетесь к элементу по разным классам, сам элемент не размножается.

Comments

[Елена]

Ankhena они будут отдельно подставляться. Но в один момент нужно оба, не хотелось делать дополнительно, где будет сразу с обоих сторон. Думала, что можно будет соединить левый и правый в тот самый момент и смогу избежать дополнительного градиента

[Ankhena]

Елена,
если отдельно, то

.gradient::before {}
.gradient::after {}

либо

.gradient {
background: первый (верхний) градиент, второй (нижний) градиент.
}

[Елена]

Ankhena, спасибо)

[Ankhena]

Елена, Хотя, если вы их добавляете манипулируя классами в js, то задумка была верная, только один должен быть before, а другой after.
Иначе он получится один.