Изменяем псевдоэлемент :after с помощью jQuery

Взаимодействовать с псевдоэлементами на странице не так просто, как с обычными HTML-элементами. До них невозможно «добраться» при помощи jQuery, а при необходимости изменить их содержимое приходиться делать различные трюки. Недавно мне понадобилось изменить фон псевдоэлемента :after . Сейчас я поделюсь с вами информацией о том, как это можно сделать.

У нас есть страничка с одним HTML-элементом (для наглядности) — заголовком h1. Внутри него находится ссылка.

 
     h1 < color:#f2b940; font-size:1.5em; font-family: Verdana, sans-serif; margin:10px 0 0 10px; cursor: pointer; >.test < border-bottom: 1px dotted #323694; color: #323694; cursor: pointer; font-weight: normal; position: relative; text-decoration: none; >.test:after 
Lorem ipsum dolor sit amet, consectetur adipiscing elit
   
При клике на ссылку под этим HTML-элемент должен появляться всплывающий блок с содержимым. Справа от ссылки находится маленькое изображение стрелочки, указывающей вниз. После клика и появления всплывающего блока, эта стрелочка должна менять свое направление вверх.
Изображение стрелочки является фоном псевдоэлемента :after ссылки. Как же сделать так, чтобы все работало, как я описал?
Если добавить следующий код, то это НЕ СРАБОТАЕТ.
 
$('a.test:after').css('background', 'url(arrow.png) no-repeat 0 -50px');
Дело в том, что пседоэлементы находятся вне DOM-дерева и к ним нельзя обратиться как к простым HTML-элементам, например, заголовками или абзацам. На самом деле решение есть и оно несложное. Нужно просто создать еще один CSS-класс и добавить в него правила, описывающие внешний вид измененного псевдоэлемента. В данном случае они будут следующими.
 .test, .test2 < border-bottom: 1px dotted #323694; color: #323694; cursor: pointer; font-weight: normal; position: relative; text-decoration: none; >.test:after, .test2:after < background: url("arrow-blue.png") no-repeat; background-position: 100% -10px; content: ""; display: block; height: 5px; position: absolute; right: -17px; top: 50%; width: 10px; >.test2:after






Как вы видите, я просто добавил еще один CSS-класс к существующим правилам и создал еще одно правило для изменения позиции фона, чтобы наша стрелочка указывала вверх.
Последний штрих: пара строчек jQuery и задача рещена.
 
  
Вот таким образом можно изменять внешний вид псевдоэлементов на веб-страницах.
Демо-страничка с примером из заметки.
Псевдоэлементы ::after и ::before
::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для , и ряда других элементов.
В примере 1 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.






Пример 1. Применение ::after
Результат примера показан на рис. 1.

Рис. 1. Добавление текста к абзацу с помощью ::after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .
По своему действию ::before аналогичен ::after , но вставляет псевдоэлемент до содержимого элемента. В примере 2 показано добавление маркеров своего типа к пунктам списка посредством сокрытия стандартных маркеров и применения псевдоэлемента ::before .






Пример 2. Использование ::before
Результат данного примера показан на рис. 2.

Рис. 2. Изменение вида маркеров с помощью ::before
В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content .
Блок с цитатой
::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).







Рис. 3. Вид цитаты с кавычками
Для отображения кавычки перед текстом мы используем ::before , а после текста — ::after . К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).
Пример 3. Кавычки в цитате
Хлебные крошки
Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).






Рис. 4. Хлебные крошки

, а внутри пунктов

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


Пример 4. Хлебные крошки
См. также


content
quotes
relative и absolute
Аккордеон меню
Анимация ссылок при наведении
Атрибуты ссылок
Добавление тени
Использование в вёрстке
Не только текст
Очистка float
Подробнее о позиционировании
Псевдоэлемент ::after
Псевдоэлемент ::before
Псевдоэлементы
Работа с типографикой
Синтаксис CSS
Спойлер
Текст в HTML

CSS before, after и другие псевдоэлементы
Псевдоэлемент — это дополнение к селектору, с помощью которого можно стилизовать элемент, не определённый в структуре HTML документа. Добавляется он к селектору c помощью символов :: , т.е. так селектор::псевдоэлемент .
Но нотация с двумя двоеточиями появилась только в CSS3. Это было сделано для того, чтобы в CSS коде можно было очень просто отличить псевдоэлементы от псевдоклассов. До CSS3 псевдоэлементы определялись так же, как и псевдоклассы, т.е. с помощью одного двоеточия. Все современные браузеры принимают для определения псевдоэлементов как одно двоеточие, так и два.
Но если проект не требует поддержку браузера Internet Explorer 8, то рекомендуется в CSS коде для определения псевдоэлементов писать два двоеточия. В противном случае необходимо использовать одно двоеточие, т.к. Internet Explorer 8 не поддерживает запись с :: .






Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя.
Псевдоэлементы применяются на сайте только в оформительских целях, т.е. для добавления к элементам определённых дизайнерских решений. С помощью них не рекомендуется добавлять на сайт важную информацию. Если этих элементов нет в DOM, то к ним нельзя добавить обработчики событий или каким-то другим образом взаимодействовать с ними через JavaScript.

first-letter
first-line
before
after
selection

CSS псевдоэлемент first-letter
Псевдоэлемент first-letter предназначен для задания стилей первому символу в тексте блочного элемента, но только в том случае если перед этим символом нет другого контента (изображения, inline таблицы).
К этому псевдоэлементу могут применяться только ограниченный набор CSS свойств. К ним относятся свойства, имеющие отношения к цвету, фону, границам, свойствам шрифта, полям padding и margin.
CSS3 синтаксис first-letter :
selector::first-letter { /* стили для оформления первого символа */ }
Если с помощью псевдоэлемента before и CSS-свойства content добавить некоторый текст к элементу, то в этом случае first-letter применит заданные стили к первому символу этого текста.






Примеры использования псевдоэлемента first-letter .
/* пример 1 */ .text::first-letter { font-size: 1.5em; background-color: #000; color: #fff; margin-right: 0.2em; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

/* пример 2 (с использование float) */ .text::first-letter { float: left; font-size: 1.5em; background-color: #000; color: #fff; margin: 0.3em 0.2em 0 0; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

/* пример 3 (оформление первого символа с помощью рамки) */ .text::first-letter { font-size: 1.5em; border: 1px dashed #999; margin-right: 0.2em; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

CSS псевдоэлемент first-line
Псевдоэлемент first-line предназначен для оформления первой строки форматированного текста элемента с блочным отображением.
К этому псевдоэлементу можно применять только ограниченный набор CSS свойств, такие же как к first-letter .






selector::first-line { /* стили, которые нужно применить к первой строке */ }
Пример, в котором с помощью псевдоэлемента first-line преобразуем символы первой строки текста в прописные и установим им жирное начертание.
.text::first-line { text-transform: uppercase; font-weight: bold; }

Обратите внимание, что на адаптивных сайтах первая строка может иметь на разных по размеру экранах разную длину. Если нужно чтобы первая линия состояла из одного и того же количества символов на разных экранах устройств, то её нужно просто ограничить.
 
Lorem ipsum, 
dolor sit amet consectetur adipisicing elit. Doloribus molestiae aspernatur beatae harum, obcaecati ipsam neque eaque quos consequatur dolor ab voluptatibus. Provident, dolorem?
 
CSS псевдоэлемент before
before предназначен для создания псевдоэлемента внутри элемента перед его контентом. По умолчанию данный псевдоэлемент имеет display: inline . Если псевдоэлементу before нужно установить другое отображение, то его нужно указать явно (например: display: block ).
Содержимое данного псевдоэлемента задаётся с помощью CSS свойства content . При этом если псевдоэлемент будет без содержимого, то данное свойство всё равно необходимо указывать и использовать в качестве его значения пустую строку content: "" . Без указания content псевдоэлемент отображаться не будет.






Псевдоэлемент before не наследует стили. Поэтому если необходимо чтобы у него были стили как у родительского элемента, то ему необходимо их явно прописывать.
CSS псевдоэлемент after
after аналогичен before с одной лишь разницей, что он в отличии от последнего создаёт псевдоэлемент внутри элемента не перед его контентом, а после него .
.blockquote::before { content: ""; } .blockquote::after { content: ""; }

Примеры использования псевдоэлементов after и before
1. Применение CSS псевдоэлементов after и before для оформления цитаты.
HTML разметка цитаты:
Текст цитаты.
 
CSS код для оформления цитаты:
.blockquote { margin: 0 auto; max-width: 400px; position: relative; padding: 5px 32px; background-color: #e0f2f1; color: #004d40; border-radius: 4px; } .blockquote::before { content: '\201e'; position: absolute; top: -16px; left: 6px; font-family: Georgia, serif; font-size: 40px; line-height: 1; font-weight: bold; } .blockquote::after { content: '\201c'; position: absolute; right: 6px; font-family: Georgia, serif; font-size: 40px; line-height: 1; font-weight: bold; }






2. Пример использования псевдоэлемента before для разделения элементов в хлебных крошках.
HTML структура хлебных крошек:
CSS код хлебных крошек:
.breadcrumb { display: flex; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1rem; list-style: none; color: #b39ddb; background-color: #ede7f6; border-radius: .25rem; } .breadcrumb__item>a { text-decoration: none; color: #673ab7; } .breadcrumb__item>a:hover { text-decoration: none; color: #311b92; } .breadcrumb__item+.breadcrumb__item { padding-left: 8px; } /* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */ .breadcrumb__item+.breadcrumb__item::before { display: inline-block; padding-right: 8px; color: #673ab7; content: "•"; }
Изображение хлебных крошек:
 
3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.






Псевдоэлемент before используется для затемнения изображения, а after - для отображения картинки «Запустить».
HTML код ссылки:
CSS код с использованием after и before:
.image__over { position: relative; display: block; overflow: hidden; padding-top: 56.25%; background: url(buterfly.jpg) no-repeat; background-size: cover; border-radius: 4px; } .image__over:hover::before, .image__over:focus::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(48, 53, 71, .4); cursor: pointer; } .image__over:hover::after, .image__over:focus::after { content: ""; position: absolute; top: 50%; left: 50%; height: 64px; width: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 72px 64px; background-repeat: no-repeat; background-position: center center; margin-left: -32px; margin-top: -36px; cursor: pointer; }

4. Пример, аналогичный предыдущему, за исключением того что изображение будем задавать с помощью элемента img .
HTML разметка этого примера:






.image__over { display: inline-block; font-size: 0; position: relative; overflow: hidden; border-radius: 4px; } .image__over>img { max-width: 400px; } .image__over:hover::before, .image__over:focus::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(48, 53, 71, .4); cursor: pointer; } .image__over:hover::after, .image__over:focus::after { content: ""; position: absolute; top: 50%; left: 50%; height: 64px; width: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 72px 64px; background-repeat: no-repeat; background-position: center center; margin-left: -32px; margin-top: -36px; cursor: pointer; }
CSS псевдоэлемент selection
Псевдоэлемент selection предназначен для установления стилей к выделенному пользователем фрагмента текста.
CSS свойства, которые можно использовать для оформления этого псевдоэлемента очень мало. Это background , color , cursor и outline .
/* для Firefox */ ::-moz-selection { /* стили для оформления выделенного фрагмента текста */ } ::selection { /* стили для оформления выделенного фрагмента текста */ }
Пример, в котором зададим стили для оформления выделенного пользователем фрагмента текста:
.text::selection { background-color: #9c27b0; color: #fff; }
Псевдоэлементы
Вы не создавали этот элемент? А он есть! Всё благодаря CSS.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье

Контрибьюторы:







Егор Левченко ,
Светлана Коробцева

Обновлено 8 мая 2023
Кратко
Скопировать ссылку "Кратко" Скопировано
Псевдоэлементы — это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS. Чаще всего используются для создания различных декоративных элементов (которые не несут содержательного смысла).
Также псевдоэлементы приходят на помощь, когда нужно наложить поверх картинки так называемый оверлей (перекрывающий слой). На этом польза от псевдоэлементов не заканчивается.
Пример
Скопировать ссылку "Пример" Скопировано
Самый частый сценарий использования псевдоэлемента — наложение оверлея, полупрозрачной заливки поверх картинки. Чаще всего это требуется на первом экране, но этим способом можно наложить оверлей на любое изображение на сайте.






   
Good evening, Clarice.  header class="header"> h1 class="header__title">Good evening, Clarice.h1> header>    Скопировать Скопировано Не удалось скопировать   
 .header  background: #999999 url("background.svg") no-repeat center / cover;> .header__title  color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center;> .header  background: #999999 url("background.svg") no-repeat center / cover; > .header__title  color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center; >    Скопировать Скопировано Не удалось скопировать   

Если выделить текст в этом примере, то станет видно, что фон выделения ярко-красного цвета.
: : placeholder
Скопировать ссылку "::placeholder" Скопировано
Он позволяет стилизовать подсказку, которая выводится в поле ввода текста ( ).
Текст подсказки задаётся при помощи атрибута placeholder у тега .
  input type="email" placeholder="test@example.com">    Скопировать Скопировано Не удалось скопировать   







По умолчанию цвет текста подсказки серый. Но иногда по дизайну требуется другой цвет.
Используйте псевдоэлемент : : placeholder и задайте нужные стили для подсказки. Можно изменить всё, вплоть до шрифта. При этом стили текста, который будет вводить пользователь, не будут затронуты.
 input::placeholder  color: #2E9AFF;> input::placeholder  color: #2E9AFF; >    Скопировать Скопировано Не удалось скопировать   
: : marker
Скопировать ссылку "::marker" Скопировано
 : : marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
�� Обязательно проверяйте поддержку псевдоэлемента в нужных браузерах. Для этого можно использовать сайт Can I use.






�� Для свойства content есть несколько полезных трюков. Например, можно с помощью data-атрибута у тега (которому можно задать значение при помощи JavaScript) и значения attr ( data - атрибут ) вывести количество непрочитанных сообщений на лейбле. Или количество товаров в корзине. Такой способ будет «дешевле» в том плане, что реальная HTML-разметка не изменяется.
�� В качестве значения свойства content можно вставлять юникод. Например, можно добавить символ копирайта при помощи записи content : "& # 169;" .
�� Можно встретить в коде написание псевдоэлементов с одним двоеточием в начале. Такой синтаксис допустим почти всегда, кроме как с псевдоэлементами : : selection и : : placeholder . Но в последних редакциях спецификации рекомендуется писать все псевдоэлементы с двумя двоеточиями, чтобы визуально отделить их от псевдоклассов.
На практике
Скопировать ссылку "На практике" Скопировано
Андрей Пилюгин советует
Скопировать ссылку "Андрей Пилюгин советует" Скопировано
�� Так как псевдоэлементы : : before и : : after отсутствуют в дереве DOM, то невозможно на них повесить JavaScript-событие. В большинстве случаев достаточно отслеживать события на самом элементе и через него менять свойства псевдоэлемента. Если необходимо отследить, например, клик именно по псевдоэлементу, то можно использовать хак со сравнением offset X .
Например, создадим управляющий контрол, позволяющий менять количество товаров в корзине. При этом кнопки «+» и «-» у нас будут псевдоэлементами.
️ Это демонстрационный пример. В реальной жизни лучше так не делать. Используйте подходящие HTML-теги.
 0 span class="quantity-change">0span>    Скопировать Скопировано Не удалось скопировать   
Зададим стили для поля ввода:
 .quantity-change  display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none;> .quantity-change  display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none; >    Скопировать Скопировано Не удалось скопировать   
Для данного хака нужно внимательно следить за шириной элемента, так как событие будет вычисляться именно по ширине. В данном случае ширина элемента 160 px.
Управляющие контролы (в роли которых у нас выступят : : before и : : after ) будут по 40 px:
 .quantity-change::before, .quantity-change::after  display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer;> .quantity-change::before  content: '–';> .quantity-change::after  content: '+';> .quantity-change::before, .quantity-change::after  display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer; > .quantity-change::before  content: '–'; > .quantity-change::after  content: '+'; >    Скопировать Скопировано Не удалось скопировать   
Теперь, зная ширину элементов и контролов, считаем, что нажатие первых 40 px является событием для : : before , а нажатие последних 40 px — для : : after :
 const quantity = document.querySelector('.quantity-change')let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) =>  if(event.offsetX 0)  counter-- > else if(event.offsetX >= 120)  counter++ > quantity.textContent = counter>) const quantity = document.querySelector('.quantity-change') let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) =>  if(event.offsetX  40 && counter > 0)  counter-- > else if(event.offsetX >= 120)  counter++ > quantity.textContent = counter >)    Скопировать Скопировано Не удалось скопировать   
Бинго! Теперь мы можем отследить нажатия на псевдоэлементы и выполнить нужные действия.
Данный метод стоит применять с осторожностью, с оглядкой на медиавыражения, которые могут изменить размеры элемента и всё сломать. Если есть возможность спроектировать свой код без связки «Псевдоэлементы + JavaScript», то это будет хорошим решением.
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
�� Очень интересный и полезный трюк — задавать кастомный счётчик спискам. Бывает необходимость добавить скобки после цифры вместо стандартной точки.
Для создания кастомного счётчика первым делом нужно сбросить стандартные маркеры списка:
 .list  list-style-type: none;> .list  list-style-type: none; >    Скопировать Скопировано Не удалось скопировать   
Теперь придумаем и пропишем имя нового счётчика. Имя счётчика будет использоваться дальше.
 .list  list-style-type: none; counter-reset: new-counter;> .list  list-style-type: none; counter-reset: new-counter; >    Скопировать Скопировано Не удалось скопировать   
Говорим браузеру, что считать нужно именно пункты списка:
 .list__item  counter-increment: new-counter;> .list__item  counter-increment: new-counter; >    Скопировать Скопировано Не удалось скопировать   
Теперь для каждого пункта списка прописываем псевдоэлемент : : before и запускаем кастомный счётчик, дополняя его нужными символами. В текущем случае в кавычках добавляем круглую скобку и пробел:
 .list__item::before  content: counter(new-counter) ") ";> .list__item::before  content: counter(new-counter) ") "; >    Скопировать Скопировано Не удалось скопировать   
Подобным образом можно менять стили маркеров как заблагорассудится.
�� Псевдоэлементы — лучшее, что придумали в CSS �� С ними жить и верстать гораздо проще. Уделите время и поищите интересные трюки и фишки, которые можно сделать при помощи псевдоэлементов.
Эти маленькие друзья верстальщика могут удивить вас своим могуществом.
Их возможности заслуживают отдельной статьи. Например, такой, которую написал Крис Койер: «A Whole Bunch of Amazing Stuff Pseudo Elements Can Do».


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

Browsec что это
Как создать свое расширение файла
Какие особо сложные задачи вам приходится решать на рабочем месте
Почему unity hub не устанавливает unity