Где расположен псевдо-элемент ::before?

.parent {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}
.parent::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
}

По оси X псевдо-элемент ::before будет в центре, потому что применен place-items: center. По оси Y прижат к верхней границе родителя, потому что свойство top имеет больший приоритет, чем place-items.

15.08.2025 закроется доступ к каналу. Вы можете продолжить читать контент. Для этого купите доступ к закрытой части канала.

Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.

Что я советую посмотреть из моего контента:

1. Вы не знаете CSS
Мой список вопросов, позволяющий найти слабые места в знаниях.

2. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика
Отвечаю на самые популярные вопросы о CSS на интервью фронтендера.

3. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Рассказываю об ошибках в верстке, которые влияют на цифровую доступность.

4. Живые шпаргалки для свойств display и position
Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить.

5. Код компонента Timeline
Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде.

6. Анимашки и CSS творчество
UI Анимации, CSS арт и готовые визуальные решения.

7. Пример организации CSS
Правила и подходы, проверенные мной. Обратите внимание на названия классов, использование компонентов, кастомизацию, комментирование.

Какое вычисленное значение у свойства width?

.parent {
  display: flex;
}
.parent::before {
  content: "";
  position: absolute;
  width: 1rem;
  flex-basis: 2rem;
}

flex-basis перестает работать после применения к элементу position: absolute или fixed, поскольку он находится вне flex контекста. Правильный ответ — 1rem

В следущем примере псевдо-элемент скрыт позади родителя. Как сделать, чтобы он отображался перед ним, но позади контента?

<div class="parent">здесь контент</div>

.parent {
  width: 100%;
  height: 100dvh;
  background-color: red;
  position: relative;
}
.parent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: green;
}

Все дочерние элементы с отрицательным z-index будут скрыты любым родительским элементом, у которого установлено background-color. Но isolation: isolate останавливает это. Просто добавьте его к родительскому элементу, и элементы с отрицательным z-index начнут позиционироваться от него.