Псевдоэлементы: ::before, ::after, ::first-line, ::first-letter

Что такое псевдоэлементы и зачем они нужны?

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

🔥 Где применяются?
- Добавление иконок, разделителей, декоративных элементов.
- Стилизация первой буквы или строки текста.
- Создание сложных эффектов (например, анимированных подчёркиваний).

::before и ::after — ваши верные помощники

Эти псевдоэлементы вставляют контент до или после содержимого выбранного элемента. Работают только с content (даже пустым — content: "").

.button::before {
  content: "→ ";  /* Добавляет стрелку перед текстом кнопки */
  color: #ff4757;
}

.blockquote::after {
  content: "”";  /* Добавляет закрывающую кавычку */
  font-size: 2em;
}

💡 Совет: ::before и ::after по умолчанию — строчные элементы. Чтобы задать размеры (width, height), превратите их в display: block или inline-block.

Пример: Декоративное подчёркивание

.title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  margin-top: 10px;
}

Результат: Под заголовком появляется градиентная линия.

::first-letter и ::first-line — типографика на уровне CSS

Эти псевдоэлементы позволяют стилизовать первую букву или первую строку текста — идеально для журнального дизайна!

::first-letter — буквица

.article p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 5px;
  color: #e84393;
  font-family: Georgia, serif;
}

Что произошло? Первая буква параграфа стала большой и розовой, как в старых книгах.

::first-line — акцент на начало

.poem::first-line {
  font-weight: bold;
  letter-spacing: 1px;
  color: #0984e3;
}

Эффект: Первая строка стихотворения выделяется жирным шрифтом и синим цветом.

Комбинируем псевдоэлементы

Можно создавать сложные эффекты, комбинируя несколько псевдоэлементов.

Пример: Иконка + градиентная буквица

.post {
  position: relative;
  padding-left: 30px;
}

.post::before {
  content: "✍️";
  position: absolute;
  left: 0;
  top: 0;
}

.post::first-letter {
  font-size: 2.5em;
  background: linear-gradient(45deg, #fd79a8, #6c5ce7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Что получилось:
1. Ручка (::before) слева от текста.
2. Первая буква с градиентом (::first-letter).

Частые ошибки и как их избежать

❌ Забыли content
Псевдоэлементы ::before и ::after не работают без этого свойства! Даже если контент пустой: content: "".

❌ Путают :before и ::before
Старая запись (:before) работает, но современный стандарт — два двоеточия (::before).

❌ Применяют к неподходящим элементам
::first-letter и ::first-line работают только с блочными элементами (display: block).

Практика: Создаём эффектный блок цитаты

<div class="quote">Код — это поэзия.</div>

.quote {
  position: relative;
  padding: 20px;
  font-size: 1.5em;
  font-style: italic;
}

.quote::before,
.quote::after {
  content: '"';
  font-size: 4em;
  opacity: 0.2;
  position: absolute;
}

.quote::before {
  top: -10px;
  left: 5px;
}

.quote::after {
  bottom: -30px;
  right: 5px;
}

Итог: Цитата с гигантскими полупрозрачными кавычками по краям.

Итоги

🔹 ::before и ::after — для добавления контента и декоративных элементов.
🔹 ::first-letter и ::first-line — для типографских изысков.
🔹 Не забывайте про content и display.

Теперь вы готовы украшать страницы без лишнего HTML! 🎨