::after (:after)

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

Синтаксис

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

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

The ::after notation (with two colons) was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

Примеры

Простое использование

Let's create two classes: one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a pseudo-element to the end of it.

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>
.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content: "<- BORING!";
   color: red;
}

Результат

Пример оформления

We can style text or images in the content property almost any way we want.

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Результат

Подсказки

The following example shows the use of the ::after pseudo-element in conjunction with the attr() CSS expression and a data-descr custom data attribute to create a pure-CSS, glossary-like tooltip. Checkout the live preview below, or you can see this example on a separate page.

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

Результат

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

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::after' в этой спецификации.
Рабочий черновик Нет значительных изменений по сравнению с предыдущей версией спецификации
CSS Transitions
Определение 'transitions on pseudo-element properties' в этой спецификации.
Рабочий черновик Allows transitions on properties defined on pseudo-elements.
CSS Animations
Определение 'animations on pseudo-element properties' в этой спецификации.
Рабочий черновик Allows animations on properties defined on pseudo-elements.
Selectors Level 3
Определение '::after' в этой спецификации.
Рекомендация Использование двух двоеточий
CSS Level 2 (Revision 1)
Определение '::after' в этой спецификации.
Рекомендация Первоначальное определение с одним двоеточием

Совместимость с браузерами

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Поддержка :after (Да) 1.0 (1.7 или ранее)[1] 8.0 4 4.0
Поддержка ::after (Да) 1.5 (1.8)[1] 9.0 7 4.0
Поддержка анимаций и плавных переходов 26 4.0 (2.0) Нет Нет Нет
Особенность
Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Поддержка :after (Да) ? ? ? ?
Поддержка ::after (Да) ? ? ? ?
Поддержка анимаций и плавных переходов (Да) 4.0 (4.0) Нет Нет Нет

[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: andreww2012
 Обновлялась последний раз: andreww2012,