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

Тема в разделе "Верстка", создана пользователем d0ublezer0, 4 мар 2020.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    331
    Симпатии:
    172
    https://jsfiddle.net/a8s1yxeq/

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

    Это возможно?
     
  2. Didi

    Didi Постоялец

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

    Также можно попробовать поиграться с border, есть тема как сделать треугольники при помощи CSS. Типа этого: http://apps.eky.hk/css-triangle-generator/
     
    Последнее редактирование: 4 мар 2020
  3. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    331
    Симпатии:
    172
    тогда она будет прямоугольная. и она там есть, кстати

    примерно такое нужно:
    [​IMG]
     
  4. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    73
    Симпатии:
    35
    Я подредактировал свое сообщение
     
  5. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    331
    Симпатии:
    172
    Да, я знаю эту технику, спасибо. Она работает для однородного цвета, потому не подходит.
     
  6. Chezzy

    Chezzy Создатель

    Регистр.:
    18 мар 2018
    Сообщения:
    8
    Симпатии:
    0
    position innerhit и position absolute в помощь.
     
  7. Jhon2

    Jhon2 Создатель

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

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

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