Какое свойство получает псевдоэлемент от родителя?

Свойства, передаваемые псевдоэлементам от родительского элемента

Псевдоэлементы (::before, ::after, ::marker, ::first-letter, ::first-line и др.) в CSS являются виртуальными элементами, которые генерируются браузером и вставляются в DOM относительно их родительского элемента. Они наследуют большинство стилевых свойств от этого родителя, но с важными исключениями и особенностями, зависящими от типа псевдоэлемента и спецификации CSS.

Основной механизм наследования

По умолчанию псевдоэлементы наследуют наследуемые свойства (inheritable properties) от родительского элемента. К ним относятся:

• Текстовые свойства: color, font-family, font-size, font-weight, line-height, text-align.
• Свойства списков: list-style-type.
• Часть визуальных свойств: visibility, cursor.

.parent {
  color: #2c3e50;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

.parent::before {
  content: '→ ';
  /* Псевдоэлемент автоматически получит цвет, шрифт и размер от .parent */
}

Ключевые исключения и особенности

1. Ненаследуемые свойства по умолчанию не передаются. Это свойства, влияющие на блочную модель, позиционирование и фон:

    *   `width`, `height`, `margin`, `padding`, `border`.
    *   `background`, `background-color`, `background-image` (если не указаны явно).
    *   `position`, `top`, `left`, `display` (значение по умолчанию для `::before/::after` — `inline`).

    Их необходимо задавать явно для псевдоэлемента.

1. Специфичное поведение для разных псевдоэлементов:

    *   **`::before` и `::after`**:
        *   Наследуют текстовые свойства.
        *   Для работы с блочной моделью их `display` часто меняют на `block` или `inline-block`.
        *   `content` — обязательное уникальное свойство, которое не наследуется.
    *   **`::first-letter` и `::first-line`**:
        *   Наследуют свойства от родителя, но применяют их только к первой букве или первой строке текста.
        *   Могут переопределять некоторые свойства родителя (например, увеличенный `font-size` для первой буквы).
    *   **`::marker`** (маркеры списков):
        *   Контролирует стиль маркера (точки, цифры) в списках.
        *   Наследует `color`, но не наследует `font-size` по умолчанию в некоторых браузерах — его часто нужно задавать явно.

Пример с явным заданием ненаследуемых свойств

.button {
  color: white;
  background-color: #3498db;
  padding: 12px 24px;
  border-radius: 6px;
  position: relative;
}

.button::after {
  content: '';
  /* Наследует color: white, но НЕ наследует background-color или padding */

  /* Свойства блочной модели задаются явно */
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Новый фон */
  border-radius: 6px; /* Копируем от родителя, но не наследуем автоматически */
  z-index: -1;
}

Важные практические выводы

• Наследование работает, но ограничено. Для сложного оформления всегда указывайте свойства псевдоэлементов явно.
• Псевдоэлементы — часть родителя. Они влияют на размер родителя (width/height), если имеют блочную модель, и участвуют в потоке документа.
• Контекст форматирования. Псевдоэлементы создаются внутри родительского элемента и следуют его правилам позиционирования и отображения.
• Браузерные различия. Особенно для ::marker и ::first-line поведение наследования может немного различаться, поэтому проверка в разных браузерах важна.

В итоге, псевдоэлемент получает от родителя наследуемые свойства, что позволяет создавать согласованные стили без повторения кода. Однако для полноценного использования их декоративных и функциональных возможностей необходимо явно задавать ненаследуемые свойства, такие как блочная модель, фон и позиционирование.