Что такое after

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

Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content .

Для ::after характерны следующие особенности.

1. При добавлении ::after к блочному элементу, значение свойства display может быть только: block , inline , none , marker . Все остальные значения будут трактоваться как block .
2. При добавлении ::after к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .

Синтаксис

Значения

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

       
Истории
 
История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.





  

В данном примере в конце текстового абзаца, помеченного классом new , выводится определенный текст для привлечения внимания. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдоэлемента ::after

Браузеры

Браузер Internet Explorer до версии 10.0 работает только с нотацией :after , описанной в спецификации CSS 2.1.

::after¶

Псевдо-элемент ::after соответствует виртуальному последнему дочернему элементу выбранного элемента.

Он обычно используется для добавления косметического контента к элементу с использованием свойства CSS содержимого. По умолчанию этот элемент inline .

• ::after
• ::backdrop
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::grammar-error
• ::marker
• ::part()
• ::placeholder
• ::selection
• ::slotted()
• ::spelling-error

Синтаксис¶

1 2 3 4 5 6 7 8 9

/* Синтаксис CSS2 */ element:after  /* свойства */ > /* Синтаксис CSS3 */ element::after  /* свойства */ > 

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

• CSS Pseudo-Elements Level 4
• CSS Transitions
• CSS Animations
• Selectors Level 3
• CSS Level 2 (Revision 1)

Поддержка браузерами¶

Примеры¶

Пример 1¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

 html> head> meta charset="utf-8" /> title>aftertitle> 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¶

1 2 3 4 5 6 7 8 9

p> Here is the live example of the above code.br /> We have some span data-descr="collection of words and punctuation">textspan> here with a few span data-descr="small popups which also hide again">tooltipsspan>.br /> Don't be shy, hover over to take a span data-descr="not to be taken literally">lookspan>. p> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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; > 

См. также¶

• Псевдо-элемент ::before
• Свойство content

Ссылки¶

• Псевдо-элемент ::afterMDN (рус.)

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

Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.

Для :after характерны следующие особенности.

• При добавлении :after к блочному элементу, значение свойства display может быть только: block , inline , none , list-item . Все остальные значения будут трактоваться как block .
• При добавлении :after к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .

Синтаксис

элемент:after

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Истории
 





История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.





  

В данном примере в конце текстового абзаца, помеченного классом new , выводится определенный текст для привлечения внимания. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдоэлемента :after

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег .

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :after к тегу .

Firefox до версии 3.5 не допускал применение к :after свойств position , float , list-style-type и некоторых значений display .

CSS по теме

Английский [ править ]

Это незаконченная статья. Вы можете помочь проекту, исправив и дополнив её .
В частности, следует уточнить сведения о:

• Английский язык
• Английские наречия
• Американский вариант английского языка
• Нужно указать гиперонимы/en
• Требуется категоризация/en
• Слова из 5 букв/en
• Английские предлоги

• Нет сведений о составе слова
• Статьи со звучащими примерами произношения
• Нужна этимология
• Статьи, нуждающиеся в доработке/en
• Нужны сведения о морфологии/en
• Нужны сведения о семантике/en
• Нужна этимология/en
• Нужно произношение
• Нужна иллюстрация
• Нужно произношение/en