Приведи пример псевдоэлемента

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

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

Практический пример: создание декоративной цитаты

Один из классических примеров — оформление блока цитаты с декоративными кавычками с помощью псевдоэлементов ::before и ::after.

HTML структура:

<blockquote class="fancy-quote">
  Сложность задачи определяется не ответом, а вопросом.
</blockquote>

CSS стилизация с псевдоэлементами:

.fancy-quote {
  position: relative;
  padding: 30px 40px;
  margin: 40px auto;
  max-width: 600px;
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #2c3e50;
}

/* Псевдоэлемент для открывающей кавычки */
.fancy-quote::before {
  content: "“"; /* Символ кавычки */
  position: absolute;
  top: -15px;
  left: 20px;
  font-size: 80px;
  color: #3498db;
  opacity: 0.3;
  font-family: serif;
}

/* Псевдоэлемент для закрывающей кавычки */
.fancy-quote::after {
  content: "”"; /* Символ кавычки */
  position: absolute;
  bottom: -40px;
  right: 20px;
  font-size: 80px;
  color: #3498db;
  opacity: 0.3;
  font-family: serif;
}

Ключевые особенности псевдоэлементов, продемонстрированные в примере:

• ::before и ::after создают виртуальные элементы внутри целевого элемента, до и после его содержимого соответственно
• Свойство content обязательно для этих псевдоэлементов — даже если это пустая строка content: ""
• Псевдоэлементы являются инлайн-элементами по умолчанию, но их можно изменить на блочные
• Они наследуют стили от родительского элемента, но могут быть переопределены
• Псевдоэлементы не существуют в DOM — они существуют только в области визуального представления

Другие распространённые псевдоэлементы:

/* ::first-letter — стилизация первой буквы */
p::first-letter {
  font-size: 200%;
  color: #e74c3c;
  float: left;
  margin-right: 5px;
}

/* ::first-line — стилизация первой строки */
p::first-line {
  font-weight: bold;
  color: #2c3e50;
}

/* ::selection — стиль выделенного текста */
::selection {
  background-color: #3498db;
  color: white;
}

/* ::placeholder — стилизация placeholder в input */
input::placeholder {
  color: #95a5a6;
  font-style: italic;
}

/* ::marker — стилизация маркеров списка */
li::marker {
  color: #e74c3c;
  font-size: 1.2em;
}

Практическое применение в реальных проектах:

1. Декоративные элементы без лишнего HTML — стрелки у тултипов, разделители, иконки
2. Очистка float с помощью ::after с clear: both
3. Кастомные чекбоксы и радио-кнопки
4. Сложные hover-эффекты и анимации
5. Типографические улучшения — буквицы, декоративные линии

/* Пример: кастомный чекбокс */
.custom-checkbox {
  position: relative;
  padding-left: 30px;
}

.custom-checkbox::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #3498db;
  border-radius: 3px;
  background: white;
}

.custom-checkbox:checked::after {
  content: "✓";
  position: absolute;
  left: 4px;
  top: -2px;
  color: #3498db;
  font-size: 16px;
  font-weight: bold;
}

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