Что такое after
Перейти к содержимому

Что такое 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

    after   

Истории

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

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

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

Рис. 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 , выводится текст для привлечения внимания. Результат примера:

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

Пример 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

    after   

Истории

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

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

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

Рис. 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *