| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 8.0 + | 1.0 + | 4.0 + | 9.2 | 1.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + |
Коротка інформація
| Застосовується | До всіх елементів |
|---|---|
| Посилання на спец іфікацію | http://www.w3.org/TR/CSS21/selector.html#before-and-after |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Псевдоелемент, який використовується для виведення бажаного тексту після вмісту елемента, до якого він додається. Псевдоелемент : after працює спільно з властивістю content .
Для : after характерні наступні особливості.
- При додаванні : after до блокового елементу, значення властивості display може бути тільки: block, inline, none, list-item . Всі інші значення будуть трактуватися як block .
- При додаванні : after до вбудованого елементу, display обмежений значеннями inline і none . Всі інші будуть сприйматися як inline .
Синтаксис
елемент: after {content:" текст" } Значення
Ні.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
after </title>
<style>
p.new:after {content:" новье!"; /* Додається текст */ color: #333; /* Колір тексту */ background-color: #fc0; /* Колір фону */ font-size: 90%; /* Розмір шрифту */ padding: 2px; /* Поля навколо тексту */ } </style>
</head>
<body>
<h2>
Історії </h2>
<p class="new">
Історія про те, як необхідно було зробити могилу, її почали копати, а потім закопувати, і що з цього вийшло. </p>
<p>
Історія про те, як біля їдальні з'явилися загадкові рожеві сліди з шістьма пальцями, і чому це сталося. </p>
</body>
</html>
В даному прикладі в кінці текстового абзацу, позначеного класом new, виводиться певний текст для залучення уваги. Результат прикладу показаний на рис. 1.
Браузери
Opera 9.2 враховує всі прогалини, як якщо б вони були укладені в тег <pre> .
Браузер Firefox до версії 2.0 включно нестабільно працює з позиціонувати елементами, а також не застосовує : after до тегу <fieldset> .
Firefox до версії 3.5 не допускав застосування до : after властивостей position, float, list-style-type і деяких значень display .