::after CSS

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

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

Псевдо-элемент **`::after`** соответствует виртуальному последнему дочернему элементу выбранного элемента. Он обычно используется для добавления косметического контента к элементу с использованием свойства CSS содержимого. По умолчанию этот элемент [`inline`](/css/display/).
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Pseudo-Elements Level 4](https://drafts.csswg.org/css-pseudo-4/#selectordef-after) * [CSS Transitions](https://drafts.csswg.org/css-transitions/#animatable-properties) * [CSS Animations](https://drafts.csswg.org/css-animations/) * [Selectors Level 3](https://drafts.csswg.org/selectors-3/#gen-content) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/generate.html#before-after-content)
Поддержка браузерами:

Can I Use css-gencontent? Data on support for the css-gencontent feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-gencontent" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-gencontent">Can I Use css-gencontent?</a> Data on support for the css-gencontent feature across the major browsers from caniuse.com. </p>

Синтаксис

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

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

Синтаксис

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

Примеры

HTML

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

CSS

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

Примеры

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

Содержание

  • Синтаксис
      /* Синтаксис CSS2 */ element:after { свойства } /* Синтаксис CSS3 */ element::after { свойства }
  • Значения
    • Примеры
        HTML <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> CSS 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; }

    В начало