CSS: псевдоэлемент под родителем?

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Для просмотра ссылки Войди или Зарегистрируйся

хочу сделать угол у переключателей с тенью, но псевдоэлемент получается над основным элементом и тень видно слева. А запихнуть ниже не удается, хотя z-index поставил у родителя выше чем у псевдоэлемента.

Это возможно?
 

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Z-Index не поможет, так как он у родителя и распространяется на все элементы под ним. На мой взгляд вы поиграйтесь настройками самой тени (двигать левее/правее, ниже/выше, дальность спреда итд..).
Или если есть возможность добавте еще один элемент непосредственно после label.

Также можно попробовать поиграться с border, есть тема как сделать треугольники при помощи CSS. Типа этого: Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
поставить на сам label
тогда она будет прямоугольная. и она там есть, кстати

примерно такое нужно:
image.thumb.png.f125c987a9bc2252fa0e9b2b012e8102.png
 

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Я подредактировал свое сообщение
 

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Да, я знаю эту технику, спасибо. Она работает для однородного цвета, потому не подходит.
 

Chezzy

Создатель
Регистрация
18 Мар 2018
Сообщения
8
Реакции
1
Для просмотра ссылки Войди или Зарегистрируйся

хочу сделать угол у переключателей с тенью, но псевдоэлемент получается над основным элементом и тень видно слева. А запихнуть ниже не удается, хотя z-index поставил у родителя выше чем у псевдоэлемента.

Это возможно?
position innerhit и position absolute в помощь.
 

Jhon2

Создатель
Регистрация
19 Май 2016
Сообщения
17
Реакции
13
Если я тебя правильно понял - то тебе нужно внутри <label for="step-1">Выбор сертификата</label> текст обернуть в еще один тег, например span, и получится
<label for="step-1"><span>Выбор сертификата<span></label>

теперь стили отвечающие за отступы и цвет присваиваешь уже span и т.д. Там уже можно сообразить все остальные переопределения стилей и кликов.
upload_2020-3-31_23-33-8.png

вот что то такое получается..
 
Сверху