PrepBro
← Назад к вопросам

В чем разница между ::Before и ::After?

1.0 Junior🔥 181 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

::before и ::after псевдоэлементы в CSS

::before и ::after — это CSS псевдоэлементы, которые позволяют вставить виртуальные элементы до или после содержимого выбранного элемента. Это мощный инструмент для создания эффектов, украшений и функциональных элементов без добавления лишней разметки в HTML.

Основная разница

::before вставляет элемент перед содержимым элемента (между открывающим тегом и содержимым).

::after вставляет элемент после содержимого элемента (между содержимым и закрывающим тегом).

<div class="container">
  <!-- Здесь будет ::before -->
  Содержимое элемента
  <!-- Здесь будет ::after -->
</div>

Синтаксис и использование

/* Современный синтаксис (двойное двоеточие) */
element::before {
  content: "Текст перед";
}

element::after {
  content: "Текст после";
}

/* Старый синтаксис (одинарное двоеточие) для совместимости */
element:before { }
element:after { }

Практические примеры

1. Декоративные элементы

.card {
  position: relative;
  padding: 20px;
}

.card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.card::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
}

2. Добавление текста и иконок

.required::after {
  content: " *";
  color: #e74c3c;
  font-weight: bold;
}

.price::before {
  content: "$";
  font-weight: bold;
}

.new-tag::before {
  content: "NEW";
  display: inline-block;
  background-color: #27ae60;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 8px;
}

3. Создание границ и разделителей

.navigation li::after {
  content: " | ";
  color: #95a5a6;
  margin: 0 10px;
}

.navigation li:last-child::after {
  content: "";
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #bdc3c7;
}

.divider::before {
  margin-right: 10px;
}

.divider::after {
  margin-left: 10px;
}

4. Интерактивные эффекты

.button {
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.button:hover::before {
  width: 300px;
  height: 300px;
}

5. Счетчики

.ordered-list {
  counter-reset: item;
}

.ordered-list li {
  list-style: none;
}

.ordered-list li::before {
  counter-increment: item;
  content: counter(item) ". ";
  font-weight: bold;
  color: #3498db;
}

Важные свойства

content — обязательное свойство для ::before и ::after. Без него псевдоэлемент не будет отображаться:

.element::before {
  content: "текст";          /* Текстовое содержимое */
  content: "";               /* Пустой элемент */
  content: attr(data-text);  /* Значение атрибута */
  content: url(image.png);   /* Изображение */
  content: counter(item);    /* Счетчик */
}

Ограничения

/* Нельзя использовать ::before и ::after на замещаемых элементах */
img::before { } /* Не работает */
input::before { } /* Не работает */
video::before { } /* Не работает */

/* Но работает на контейнерах */
div::before { } /* Работает */
span::before { } /* Работает */
label::before { } /* Работает */

Порядок отображения в стеке элементов

.container {
  position: relative;
  z-index: 1;
}

.container::before {
  z-index: 0; /* Позади содержимого */
}

.container::after {
  z-index: 2; /* Впереди содержимого */
}

HTML пример с визуализацией

<!DOCTYPE html>
<html>
<head>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #2c3e50;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    
    .tooltip::after {
      content: "";
      position: absolute;
      bottom: 115%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #2c3e50;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .tooltip:hover::before,
    .tooltip:hover::after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <span class="tooltip" data-tooltip="Подсказка">Наведи на меня</span>
</body>
</html>

Вывод

Основные различия:

  • ::before добавляет элемент в начало содержимого
  • ::after добавляет элемент в конец содержимого
  • Оба требуют свойства content для отображения
  • Работают как виртуальные элементы, не добавляя лишней разметки
  • Идеальны для декораций, иконок и функциональных дополнений
  • Не работают на замещаемых элементах (img, input, video)
  • Обеспечивают большую гибкость в стилизации без изменения HTML