::before

    0
    2101

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

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

    Как использовать псевдоэлемент before? Допустим, вы хотите оформить внешний вид цитаты на вашем сайте.

    Следующий фрагмент CSS кода добавит кавычки сверху цитаты с левой стороны, кавычки будут принадлежать этому элементу.

    Свойство content содержит юникод запись, которая транслируется в кавычки.

    Результат применения кода выше:

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

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

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

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

    Нельзя изменить размер изображения вставленного через псевдоэлемент, но об этом можно позаботится заранее, установив размер в графическом редакторе.

    К псевдоэлементу ::before могут применяться такие свойства как float, position и анимация (анимация поддерживается не всеми браузерами, ниже написано об этом).

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

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

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

    В 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 на псевдо-элементах.

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

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

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