Псевдоэлементы в CSS

Описание псевдоэлементов

Перечень псевдоэлементов, полностью поддерживаемых современными браузерами:

• :first-letter - оформление первого символа текста (не применяется к элементам со свойством display:inline; таким как span, например - но можно указать display:inline-block;)
• :first-line - оформление первой строки текста (ограничения те же, что и для селектора :first-letter);
• :selection - для браузера Firefox ::-moz-selection - стилизация текста, выделенного пользователем (мышкой или с клавиатуры);
• :before и :after - добавление к родительскому элементу (тегу) содержимого в виде значка, картинки, фона или текста.

Особенности before и after

Указание стилей для ::before и ::after аналогично добавлению тега span с содержимым или без, с несколькими важными отличиями:

• псевдоэлементы не показываются в исходном коде веб страницы и не усложняют её структуру;
• при построении структуры DOM JavaScript их не учитывает и они не вызывают событий скриптов (click, hover и проч.);
• имеют CSS свойство content, без указания которого не отображаются (для скрытия псевдоэлемента можно указать content:none;)
• не работают для элементов img  и input;
• по отношению к родительскому элементу, псевдоэлемент всегда находится "сверху" (на переднем плане).

Текущая спецификация CSS поддерживает как синтаксис для селектора псевдоэлемента с двумя двоеточиями перед названием ::, так и с одним :, а предыдущая - двойные двоеточия "не понимает".

Примеры стилизации маркированного списка

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

• скрываем маркер, выводимый по умолчанию - ul.ring {  list-style:none;  }
• элементам списка указываем стили для псевдоэлемента - селектор li::before, не забывая про свойство content:"";
• формируем маркер из квадрата 8 х 8 px с полностью скруглёнными углами width: 8px; height: 8px; border-radius: 50%;
• задаём толщину, стиль и цвет границы border:2px solid green;
• устанавливаем положение маркера по отношению к тексту display: inline-block; vertical-align: middle; margin-left: -1.2em; margin-right: 0.8em;

Применить стили к текущему списку.

Итоговые таблицы стилей:

ul.ring {
 list-style:none;
}
ul.ring li::before {
 content:"";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 border:2px solid green;
 display: inline-block;
 vertical-align: middle;
 margin-left: -1.2em;
 margin-right: 0.8em;
}

Похожим способом добавим маркер для списка в виде "галочки", отличия от предыдущего примера в самой фигуре:

• маркер - прямоугольник 8 х 12 px width: 8px; height: 12px;
• границы указываем по отдельности, потому что их всего две, а не четыре border-bottom: 2px solid green; border-right: 2px solid green;
• поворачиваем прямоугольник на 45 градусов и смещаем вверх transform: rotate(45deg) translateY(-3px);

Просмотр стилей на примере.

Получаем следующий набор стилей:

ul.tick {
 list-style:none;
}
ul.tick li::before {
 content: "";
 width: 8px;
 height: 12px;
 border-bottom: 2px solid green;
 border-right: 2px solid green;
 display: inline-block;
 vertical-align: middle;
 margin-right: 0.8em;
 margin-left: -1.2em;
 -webkit-transform: rotate(45deg) translateY(-3px);
 -ms-transform: rotate(45deg) translateY(-3px);
 transform: rotate(45deg) translateY(-3px);
}

О том, какие ещё фигуры можно "нарисовать", используя только CSS, подробно рассказывается здесь.

Реализация раскрывающегося списка

Рассмотрим пошагово, как сделать раскрываемый список с анимацией псевдоэлемента, реализуемый на CSS и jQuery.

Это ссылка с указателем в виде шеврона (скрывает список по клику)

• указываем стили для элемента :after ссылки, формирующие стрелку, направленную вниз;
• для ссылки с классом opened, "поворачиваем" стрелку вверх;
• в функции-обработчике события click, проверяем наличие класса opened у ссылки, в зависимости от этого, скрываем или раскрываем список с помощью функции jQuery slideUp / slideDown, добавляющей анимационный эффект.

В действии работу скриптов и стилей можно отследить с помощью панели инструментов вашего браузера.

Исходная HTML-разметка:

<!-- для случая, если ваш текстовый редактор оборачивает ссылки в теги p -->
<p>
 <a class="shevron opened" href="#">Текст ссылки</a>
</p>
<ul>
 <li>Элементы</li>
 <li>списка</li>
</ul>

Стили CSS:

a.shevron:after{
 content:"";
 display: inline-block;
 margin-left: 1em;
 width:8px;
 height: 8px;
 border-bottom: 2px solid blue;
 border-right: 2px solid blue;
 transform: rotate(45deg);
 vertical-align: middle;
 transition: all .5s;
 opacity:1;
}
a.shevron.opened:after{
 transform: rotate(225deg);
 opacity:0.6;
}

Функция jQuery:

$(document).on('click', 'a.shevron', function(e){
  var list = $(e.target).parent('p').next('ul');
   e.preventDefault;
     if (list.length){
       if ($(e.target).hasClass('opened')){
          list.slideUp(200);
            $(e.target).removeClass('opened');
       } else {
            list.slideDown(200);
            $(e.target).addClass('opened');
       }
     }
   return false;
});