Описание псевдоэлементов
Перечень псевдоэлементов, полностью поддерживаемых современными браузерами:
: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;
});