Можно ли в ::before и ::after не задавать конкретные размеры(ширина и высота), а взять от основного элемента?

Question

[leni_m]

https://jsfiddle.net/tsr649k5/
Блоку делаю тень таким способом. (box-shadow не подходит т.к. градиент не поддерживает)
Но будет еще много блоков разных размеров, и мне кажется неправильно каждому по отдельности задавать размеры в ::after.

Comments

[Rustam Bainazarov]

Прикольные у вас вопросы, конечно…

https://jsfiddle.net/gkvf7doj/2/

В целом, все размеры элементов зависят от их родителей, если пользоваться процентами. А у вас тут тем более абсолютное позиционирование.

[leni_m]

SmthTo, +, думал проценты от родителя брать будет

[Rustam Bainazarov]

leni_m, конечно, это же стандартный механизм.

[Ankhena]

leni_m, от родителя и берутся, кто по-вашему родитель у ::before?

[leni_m]

Ankhena, ну мне ответили, что надо написать width:100%;height100%; и не поверите! я сразу понял, что родителем у ::before является сам элемент. Или если бы мне ответили, что родителем у ::before является сам элемент, то я так же бы понял, что надо написать width:100%;height100%;. А думал я до ответа на вопрос, что все эти элементы братья между собой.

Answer 1

[ⓒⓢⓢ]

Что-нибудь из этого?
width: 100%; height: 100%

top: 20px; bottom: -20px; left: 20px; right; -20px;

width: calc(100% + 20px);  height: calc(100% + 20px);

Comments

[leni_m]

+, думал проценты от родителя брать будет

Answer 2

[killerdr]

в смысле не поддерживает градиент?
вот пример

#cube {
  background: linear-gradient(to top, #fce25b, #ecc92b);
  box-shadow:
   -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
   -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
   -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
   -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
   -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
   -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2),
   -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1),
   -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0);
}

а так вообще рекомендую - Тени блоков

Comments

[leni_m]

вот сами и подтвердили, что не поддерживает. Где между box-shadow: и ; есть слово градиент?

[killerdr]

да, пойми не в слове градиент дело. а то что тень градинтную можно сделать и без ГРАДИЕНТ.
просто по факту этот самый градиент прописывается ручками а не автоматом от одного значения до конечного.

[leni_m]

killerdr, это понятно, спасибо! низкий поклон! снимаю шляпу!