Задать вопрос
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/
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Пригласить ключевых партнеров
26 нояб. 2024, в 21:30
30000 руб./за проект
Сайт по продаже сертификатов по макетам figma
26 нояб. 2024, в 20:38
120000 руб./за проект
Сделать фичеринг для рустора
26 нояб. 2024, в 20:08
1000 руб./за проект
Ещё заказы