Задать вопрос
Sergalas
@Sergalas
Учусь
css

Объясните что с псевдо-элиментами before и как сделать правильно?

это html

<!DOCTYPE html>
    <html>
    <head>
    	<title>before</title>
    </head>
    <body>
    	<h2 class="action">Хит продаж</h2>
    </body>


это css

body h2{
      text-transform: uppercase;
      color: #fff;
      background: #F00;
      text-align: center;
      width: 120%;
      position: absolute;
      left: -5px;
      top:59px;
      transform: rotate(35deg);
    }
    body h2:after{
      backgound: #D10A0A;
      content: '';
      position: absolute;
      transform: rotate(150deg);
      width: 20px;
      height: 40px;
      left: 90%;
      z-index: -1;
    }

не понимаю почему псевдоэлимент при любом значении z-index получается по слоям выше чем сам элимент
как на фотографии получается вот такой ерундой
  • Вопрос задан
  • 122 просмотра
1 комментарий
Подписаться 1 Оценить 1 комментарий
Решения вопроса 1
xevin
@xevin
python.js
Как я понимаю, вам нужно сделать эффект загибающейся ленты.
Элемент after и before находятся внутри элемента (в вашем случае h2) и не могут быть ниже своего родителя.

Загибание ленты можно сделать из after и before в виде углоков, с помощью свойства border
Вроде такого https://jsfiddle.net/zvhygcbo/
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
не понимаю почему псевдоэлимент при любом значении z-index получается по слоям выше чем сам элимент

Потому что он внутри элемента.
Почитайте https://habrahabr.ru/post/166435/
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы