::after¶
Псевдо-элемент ::after
соответствует виртуальному последнему дочернему элементу выбранного элемента.
Он обычно используется для добавления косметического контента к элементу с использованием свойства CSS содержимого. По умолчанию этот элемент inline
.
Псевдо-элементы
- ::after
- ::backdrop
- ::before
::cue
- ::first-letter
- ::first-line
::grammar-error
::marker
::part()
- ::placeholder
- ::selection
::slotted()
::spelling-error
Синтаксис¶
/* Синтаксис CSS2 */
element:after {
/* свойства */
}
/* Синтаксис CSS3 */
element::after {
/* свойства */
}
Спецификации¶
- CSS Pseudo-Elements Level 4
- CSS Transitions
- CSS Animations
- Selectors Level 3
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Примеры¶
Пример 1¶
<!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
, выводится текст для привлечения внимания. Результат примера:
Пример 2¶
<p>
Here is the live example of the above code.<br />
We have some
<span data-descr="collection of words and punctuation">text</span> here with a
few
<span data-descr="small popups which also hide again">tooltips</span>.<br />
Don't be shy, hover over to take a
<span data-descr="not to be taken literally">look</span>.
</p>
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;
}
См. также¶
Ссылки¶
- Псевдо-элемент
::after
MDN (рус.)