CSS ::after — вміст після елемента

Псевдоелемент ::after створює вміст У КІНЦІ елемента — усередині нього, після справжнього вмісту.

правити

Загальний опис

правити

Порада

Щоб додати що-небуть в кінці змісту елемента, використовуйте селектор ::before.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

::after {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	4	7	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Перший абзац</p>
<p>Другий абзац</p>

p::after {
    content: " — дописано через ::after";
}

<p>Перший абзац</p>
<p>Другий абзац</p>

p::after {
    content: " — дописано через ::after";
    background-color: yellow;
    color: red;
    font-weight: bold;
}

<p><a class="ext" href="https://example.com">Зовнішнє посилання</a></p>
<p>Швидкість: <span class="val" data-unit="км/год">120</span></p>

body { font: 16px/1.6 system-ui, sans-serif; }

.ext::after {
    content: " ↗";
    color: #64748b;
}

/* одиниця живе в атрибуті, а не в тексті */
.val::after {
    content: " " attr(data-unit);
    color: #64748b;
    font-size: .85em;
}