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

«Какое свойство получает псевдоэлемент от родителя» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Псевдоэлементы наследуют стили от своего родительского элемента, но не все свойства. Например, наследуются:

  • color
  • font-family
  • text-align
  • visibility

Но не наследуются свойства, связанные с позиционированием и размерами:

  • width/height
  • margin/padding (если не заданы явно)
  • position

Пример:

.parent {
  color: red;
  font-size: 16px;
  width: 100px;
}

.parent::before {
  content: "→";
  /* Унаследует color и font-size, но не width */
}