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

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

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

Использование 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