::after

    0
    1825

    ::after -  это псевдоэлемент, который применяется для вывода содержимого после элемента к которому он применён.

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

    Как использовать псевдоэлемент after? Допустим, вы хотите добавить три восклицательных знака после каждого параграфа(!!!).

    Следующий код CSS с :after, сделает это:

    Результат написанного выше кода:

    Предположим, вы хотите добавить разделитель в виде точки, после каждого элемента меню на вашем сайте. Это отличный способ разделить элементы меню, не используя цветовую схему. Можно добавить точку как перед(::before), так и после(::after) элемента. В контексте данного псевдоэлемента, мы будем использовать ::after. Добавим эту точку •, в таблице символов мнемоники она записана как • . Создадим меню.

    Следующий CSS код добавит точки после элементов:

    В результате получаем:

    Любой контент, который был вставлен через свойство content, не отображается в DOM дереве. Тем не менее эти элементы можно легко инспектировать с помощью инструментов разработчика в Google Chrome(inspector) или Firefox(inspector или firebug). Изображение ниже показывает, как выглядит инспектирование содержимого, вставленного через псевдоэлемент.


    Пример выше показывает, что ::after элемент установлен как inline и находится после всех элементов внутри тэга.

    Любое содержимое ::after будет расположено последним за всеми элементами DOM дерева.

    Псевдоэлемент может быть использован для вставки практически любого вида содержания, в том числе символов (как выше), текста и изображений. Например, следующие варианты являются рабочими и могут быть использованы:

    Тонкости & Особенности

    Различие между (:) и (::)

    Возможно, вы встретите или уже встречали два варианта написания псевдоэлементов с двойным или одинарным двоеточием.

    В CSS1 и CSS2 псевдоэлементы задавались используя одинарное двоеточие (:), как и псевдо-классы (например, :focus или :hover). В CSS3 было введено двойное двоеточие (::) для того, чтобы разделять псевдоэлементы от псевдо-классов.

    Все браузеры, которые поддерживают обозначение двойным двоеточием, также поддерживают и обозначение одинарным двоеточием. Поэтому, если вы не собираетесь поддерживать кроссбраузерность в Internet Explorer > 8, можете не беспокоиться.

    Примечание

    Контент вставленный с помощью псевдо-элемента не является DOM элементом. Поэтому, не рекомендуется вставлять псевдо-элементы в основные участки сайта, например в те, которые относятся к основному контенту.

    Псевдо-элементы используются, в основном, для стилизации, поэтому не следует использовать их для вставки содержимого, которое предназначено для создания смысла и полноты содержимого страницы.

    Кроме того, так как содержание вставленное с помощью псевдо-элементов не вставлено в DOM, это означает, что вы не можете прикреплять любые обработчики событий к нему с помощью JavaScript.

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

    Одинарное обозначение :after поддерживается в Chrome, Firefox, Safari, Opera, Internet Explorer 8+, на Android и iOS.

    Двойное обозначение ::after такой синтаксис поддерживается в тех же браузерах, но в Internet Explorer только с версии 9.

    Анимация псевдо-элементов поддерживается в Chrome 26+, Firefox 4+, Safari 6.1+, Opera (мерцание) и Internet Explorer 10+.

    Примечание

    Internet Explorer не поддерживает использование z-index на псевдо-элементах.

    ПОДЕЛИТЬСЯ
    Предыдущая статьяbackground
    Следующая статья::placeholder
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя