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

Псевдоэлементы позволяют добавить стилизацию определённой части HTML элемента (тега), либо дополнить его содержимое.

Псевдоэлементы 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;
});

При перепечатке и копировании ссылка на сайт обязательна.

Опубликовано: 01.03.2020 г. 28


Похожие публикации

Как устроен сайт

Как устроен сайт

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

Инструменты разработчика

Инструменты разработчика

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

Отличия сетки Bootstrap 3 и 4

Особенности сетки Bootstrap

Фреймворк Bootstrap - это безусловный хит среди готовых решений для сайтов в силу проработанности деталей. Что такое Bootstrap? Это набор...