::after (:after)
================

В CSS, **`::after`** создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства `content`. По умолчанию является инлайновым.


```css
/\* Добавить стрелки после ссылок \*/
a::after {
  content: "→";
}
```


**Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` содержатся в блоке форматирования элемента, и поэтому не применяются к *замещаемым элементам*, таким как `<img>` или `<br>`.

Синтаксис
---------

Error: could not find syntax for this item

**Примечание:** В CSS3 появилась запись `::after` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:after`, введённую в CSS2.

Примеры
-------

### Простое использование

Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.

#### HTML


```html
<p class="boring-text">Вот простой скучный текст.</p>
<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
<p class="exciting-text">
  Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы
  добавить новые живые примеры, или улучшить существующие примеры.
</p>
```


#### CSS


```css
.exciting-text::after {
  content: "<- теперь это \*просто\* потрясающе!";
  color: green;
}

.boring-text::after {
  content: "<- СКУЧНО!";
  color: red;
}
```


#### Результат

### Пример оформления

Можно стилизовать текст или изображения в свойстве `content` практически любым способом.

#### HTML


```html
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
```


#### CSS


```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### Результат

### Подсказки

Следующий пример показывает использование псевдоэлемента `::after` в сочетании с CSS-выражением `attr()` и пользовательского `data-*` атрибута `data-descr` для создания *подсказки* на чистом CSS.

#### HTML


```html
<p>
  Здесь находится живой пример вышеприведённого кода.<br />
  У нас есть некоторый
  <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с
  несколькими
  <span data-descr="маленькие всплывающие окошки, которые снова исчезают"
 >подсказками</span
 >.<br />
  Не стесняйтесь, наводите мышку чтобы
  <span data-descr="не понимать буквально">взглянуть</span>.
</p>
```


#### CSS


```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```


#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `::before`, `content`