Псевдоэлементы — это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в 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-кода. Они позволяют сделать дизайн более гибким и интересным, облегчая поддержку и обновление стилей.

Feb. 26, 2024, easyoffer