Псевдоэлемент ::after в CSS

Определение и использование

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

Использование content Атрибут указывает на содержимое, которое нужно вставить. Значение content может быть:

• Строка: content: "Hello world!";
• Изображение: content: url(myimage.jpg);
• Без содержимого: content: none;
• Счетчик: content: counter(li);
• Цитаты: content: close-quote;
• Значение атрибута: content: " (" attr(href) ")";

Совет:Обратите внимание, что вставляемое содержимое по-прежнему находится внутри указанного элемента. Вставляемое содержимое добавляется после другого содержимого внутри элемента.

Использование ::before Вставьте содержимое перед содержимым специфического элемента.

Пример

Пример 1

Вставьте строку после содержимого каждого элемента <p>:

p::after {
  content: " - запомните это";
}

Попробуйте сами

Пример 2

Вставьте строку после содержимого каждого элемента <p>, и установите стиль вставляемого содержимого:

p::after {
  content: " - запомните это";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Попробуйте сами

CSS грамматика

::after {
  css объявления;
}

Технические детали

Поддержка браузеров

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

Связанные страницы

Урок:CSS псевдоэлементы

См. также:Псевдоэлемент ::before в CSS