Псевдоэлементы :Before и :After – стиль и скорость

Здравствуйте, уважаемые друзья. Как вы знаете, на скорость загрузки сайта влияет довольно много факторов. А ещё скорость загрузки сайта – это один из факторов ранжирования в поисковых системах.

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

Разумеется, перед загрузкой изображений на сайт их нужно оптимизировать, как и какими средствами, я писал здесь. Также положительно на скорости загрузки скажется объединение элементов дизайна в CSS-спрайты. Этот способ сократит в разы количество запросов к базе данных, и на выходе вы получаете более шустрый сайт.

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

Если хотите узнать всё и сразу – смотрите видеоурок.

Что такое псевдоэлементы :Before и :After

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

Я увидел в них своего рода альтернативу css-спрайтам. На моей нынешней теме оформления я собрал элементы дизайна в спрайты. Это сократило время загрузки сайта.

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

Что можно упаковать в псевдоэлементы :Before и :After

Используя данные псевдоэлементы, вы можете выводить специальные символы, иконки и даже css-спрайты. Для этого всего лишь нужно в исходный код вставить необходимые теги, а всё остальное настраивается в файле стилей.

Есть лишь некоторые отличия в наполнении псевдоэлементов контентом. Скажем, если это просто кавычки или скобка, или какой другой простой символ, то проблем нет вообще. Но, вот если это шрифт-иконки или фоновое изображение, то придётся немного повозиться. И эта возня того стоит.

Кстати, если в качестве контента для псевдоэлементов использовать специальные символы или шрифты-иконки, то к ним можно применять стили css: цвет, размер, начертание, позиционирование и так далее.

Как использовать псевдоэлементы :Before и :After

Конструкция использования псевдоэлементов достаточно проста. :Before устанавливается перед элементом, а :After после элемента.

В HTML код вставляем такую конструкцию:

<span class=”psevdo”>Здесь может быть любой текст.</span>

Разумеется, это пример и в каждом конкретном случае эту конструкцию можно всегда изменить под себя. Класс «psevdo» будет использоваться для добавления псевдоэлементов в стилях CSS. И делается это через свойство css (content).

Допустим, если я захочу поставить впереди и сзади вышеуказанной фразы символ параграфа §, то мне нужно будет добавить вот такие стили:

. psevdo:before { content: '§'; }
. psevdo:after { content: '§'; }

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

И получится так:

§Здесь может быть любой текст.§

Это был простой пример. Теперь давайте рассмотрим пример с добавлением псевдоэлементов с фоновым изображением.

Псевдоэлементы :Before и :After с фоновым изображением

Принцип добавления псевдоэлементов с фоновым изображение похож на предыдущий пример, но только в качестве контента будет использоваться изображение. Можно использовать как отдельные изображения (иконки), так и спрайты.

В качестве примера я приготовил небольшой спрайт.

А теперь давайте разберём, как добавить псевдоэлементы с изображением.

Код html будет тот же.

<span class=”psevdo”>Здесь может быть любой текст.</span>

А вот css стили будут отличаться. Отличие в том, что свойство content будет пустым. Значение будет подставляться из свойства background.

.psevdo:before{
content: ""; /*поле контент оставляем пустым*/
float: left; /*обтекание по левому краю*/
position: relative; /*позиционирование*/
top: 4px; /*отступ сверху*/
left: 4px; /*отступ слева*/
background: url(glyphicons.png) -3px -3px no-repeat; /*фоновое изображение, позиция, не размножать*/
display: block; /*блочный элемент*/
height: 25px; /*высота*/
width: 25px; /*ширина*/
}
.psevdo:after{
content: "";
position: absolute;
top: 8px;
left: 188px;
background: url(glyphicons.png) -25px 10px no-repeat;
display: block;
height: 25px;
width: 25px;
}

В результате применения этих стилей – я получил вот такой эффект.

Естественно, в каждом конкретном примере свойства css будут отличаться.

А теперь рассмотрим вариант, когда в качестве контента будут иконки специальных шрифтов. Этот вариант мне нравится больше всего.

Псевдоэлементы :Before и :After со шрифтами иконками

Реализация этого метода ещё проще, чем предыдущие два. Да и к тому же при использовании этого метода в вашем арсенале будет более 500 иконок. Которые вы сможете масштабировать, изменять цвет и так далее, как этого будет требовать ваш проект.

Я пересмотрел несколько шрифтов-конок и остановился на Awesome. На мой взгляд, здесь собраны более красивые иконки и их большой выбор.

Со всеми иконками вы можете ознакомиться на официальном сайте Awesome. Там же вы найдёте и множество примеров по применению псевдоэлементов.

Итак, для того чтобы использовать псевдоэлементы :Before и :After с контентом в виде шрифтов-иконок. Необходимо организовать подключение к базе этих самых иконок.

Шаг 1.

Подключаем базу шрифтов. Для этого в заголовок сайта (файл header.php) необходимо вставить вот такой код:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Для этого открываем административную панель WP – «Внешний вид» — «Редактор» — «Заголовок/header.php»

Шаг 2.

Теперь на сайте Awesome выбираете подходящие иконки и копируете код в исходный код вашего шаблона.

Я в качестве примера добавил псевдоэлементы :Before рядом с уже реализованными спрайтами на моём блоге.

Шаг 3.

А для того чтобы пример был более наглядный я добавил пару свойств css в файл style.css:

font-size: 15px;
color: crimson;

И добавляя нужные свойства в таблицу стилей, вы сделаете свой сайт более привлекательным.

Друзья, теперь вы понимаете, как можно использовать псевдоэлементы :Before и :After и где их применить. А самое главное эти элементы загружаются намного быстрей, чем множество маленьких изображений.

Пробуйте, внедряйте. А если будут вопросы, пишите в комментариях, — я помогу. До встречи, друзья в новых статьях.

С уважением, Максим Зайцев.