Псевдоэлементы

Что такое псевдоэлементы?

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

Основные псевдоэлементы

Наиболее часто используемые псевдоэлементы:

1. ::before — создает псевдоэлемент перед содержимым выбранного элемента.

2. ::after — создает псевдоэлемент после содержимого выбранного элемента.

3. ::first-letter — стилизует первую букву текста внутри элемента.

4. ::first-line — стилизует первую строку текста внутри элемента.

5. ::selection — стилизует выделенный пользователем текст.

Синтаксис псевдоэлементов

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

 

Обязательное свойство content

Для псевдоэлементов ::before и ::after обязательно нужно указывать свойство content. Это свойство определяет, что будет отображаться в псевдоэлементе. Даже если вы не хотите добавлять текст или символы, свойство content должно быть указано, но может быть пустым:

p::before {
  content: ''; /* Пустое содержимое */
}

Примеры использования псевдоэлементов

1. Добавление декоративного элемента перед текстом

p::before {
  content: '\9996';
}

Результат:
Каждый параграф <p> будет начинаться с символа, заданного Unicode кодом 9996 (подробнее про Unicode символы)

2. Добавление декоративного элемента после текста

a::after {
  content: ' ↗';
  color: blue;
}

Результат:
После каждой ссылки <a> будет добавлен синий символ стрелки.

3. Стилизация первой буквы

p::first-letter {
  font-size: 24px;
  color: red;
  font-weight: bold;
}

Результат:
Первая буква каждого параграфа будет крупной, красной и жирной.

4. Стилизация первой строки

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

Результат:
Первая строка каждого параграфа будет выделена жирным шрифтом и темно-синим цветом.

5. Стилизация выделенного текста

::selection {
  background-color: yellow;
  color: black;
}

Результат:
Когда пользователь выделяет текст на странице, он будет окрашен в черный цвет на желтом фоне.

Особенности псевдоэлементов

1. Не существуют в HTML: Псевдоэлементы создаются только с помощью CSS и не отображаются в DOM.

2. Могут быть стилизованы: К псевдоэлементам можно применять любые CSS-свойства, такие как color, background, font-size, margin, padding и т.д.

3. Могут быть анимированы: Псевдоэлементы поддерживают CSS-анимации и переходы (transition).

4. Могут быть использованы с любыми элементами: Псевдоэлементы можно применять к любым HTML-элементам, включая div, p, a, span и другие.