CSS псевдоэлементы :before и :after, изучение и применение

Если вы занимались вопросом реализации вкладок с помощью CSS, вы заметили что псевдоэлементы :before и :after достойны внимания разработчиков. Некоторые, используют before и after для создания красивых ссылок, как показано на картинке ниже.

Также существуют и другие псевдоэлементы, но сегодня мы сфокусируемся на :before и :after. По ходу статьи, под термином псевдоэлементы, будем подразумевать эти двое (before и after).

Что делают псевдоэлементы?

Псэвдоэлементы создают поддельные элементы и вставляют из перед (before) или после (after) определенного контента.

Сама приставка «псевдо-» говорит о том, что это не реальные элементы. Они не видимы для поисковых систем, используются только для оформления контента. Эти элементы определяются в CSS коде.

Базовый синтаксис

Псэвдоелементы :before и :after предельно просто прописываются в коде. Вот простой пример использования:

#example:before {
   content: "#";
}

#example:after {
   content: ".";
}

Здесь важно отметить две вещи. Во первых, мы указываем на реальный html элемент с помощью строк #example:before и #example:after. Приставки после двоеточия, означают, что это стиль не просто элемента, а его псевдоэлементов.

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

Расширенный синтаксис

Вы можете оставить свойство content пустым, и создать блок.

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

Если вы удалите свойство content, псевдоэлемент работать не будет. По крайней мере, это совойство должно оставаться пустым.

Вы должны знать, что некоторые используют эти элементы в виде ::before и ::after. Разницы никакой нет, браузеры поддерживают такой синтаксис также.

Еще один момент использования. Вы можете применить псевдоэлемент к каждому из html элементов.

:before {
   content: "#";
}

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

Характеристики вставляемого контента

Как упоминалось раньше, контент, который вставляется невидим на html странице. Он видим только в CSS.

Также, вставляемый контент, по умолчанию будет строчным элементом. Чтобы сделать его блочным достаточно указать display:block;, указать ширину и высоту блока. Это очень удобно при создании вкладок, кнопок и т.д.

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

Вставляем не только текстовый контент

В свойстве content, не обязательно должен быть текст, также может быть картинка. Вы можете прописать URL картинки, как это делается в background.

p:before {
   content: url(image.jpg);
}

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

Какие браузеры поддерживают :before и :after?

Особенно в последнее время важна кроссбраузерность в дизайне. Поэтому, перед использованием какого-то метода, необходимо проверять его в разных версиях браузеров. Ниже предоставлен список браузеров, которые поддерживают псевдоэлементы :before и :after.

Chrome 2+,

Firefox 3.5+ (3.0 имеет частичную поддержку),

Safari 1.3+,

Opera 9.2+,

IE8+ (С небольшими багами),

А также много других мобильных браузеров.

Существует только одна проблема (надеюсь это не новость для вас) IE6 и IE7, которые не поддерживают псевдоэлементы. Если ваша аудитория пользователей использует такие браузеры, придется помучится или просто предложить им обновить браузер.

Как видите использование псевдоэлементов before и after не так критично, как многие возомнили. На этом все, желаю творческих успехов!

Дальше: Примеры htaccess: 8 изумительных примеров .htaccess файлов