Что такое псевдоэлемент ?
Спросят с вероятностью 10%

Псевдоэлементы — это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.

Синтаксис:

Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

Распространенные псевдоэлементы:

- ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

-::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

- ::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

- ::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

Особенности работы:

✅ Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
✅ Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
✅ Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых