По умолчанию цвет текста подсказки серый. Но иногда по дизайну требуется другой цвет.

Используйте псевдоэлемент : : 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».

Источник

: : after

Загадочный элемент, которого нет в разметке. Но вот же он, стоит после настоящего элемента!

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку "Кратко" Скопировано

Когда мы в CSS добавляем : : after к селектору, для соответствующего элемента создаётся псевдоэлемент). Этот псевдоэлемент — его самый последний, он идёт после всего внутреннего содержимого.

Пример

Скопировать ссылку "Пример" Скопировано

 a::after  content: "→";> a::after  content: "→"; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку "Как пишется" Скопировано

 ::after  /* Для CSS 3 */> :after  /* Для CSS 2 */> ::after  /* Для CSS 3 */ > :after  /* Для CSS 2 */ >    Скопировать Скопировано Не удалось скопировать   

💡 В CSS 3 ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировать ссылку "Как понять" Скопировано

Проще всего воспринимать псевдоэлемент : : after как дополнительный элемент в конце тега. Мы можем применить к нему любые стили.

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

По умолчанию псевдоэлемент : : after является инлайновым.

Самый простой пример использования : : after вместе с : : before — оформление текстового содержимого:

    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об ароматах классики  
«Все кидаются в лопухи, в крапиву. » 
«Лето Господне», Иван Шмелев  article> h1> «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об span class="accent">ароматахspan> классики h1> p>«Все кидаются в лопухи, в крапиву. »p> p>«Лето Господне», Иван Шмелевp> article>    Скопировать Скопировано Не удалось скопировать   

 .accent::before,.accent::after  content: "🌸"; vertical-align: middle; font-size: 0.6em;> .accent::before  margin-right: 0.1em;> .accent::after  margin-left: 0.1em;> .accent::before, .accent::after  content: "🌸"; vertical-align: middle; font-size: 0.6em; > .accent::before  margin-right: 0.1em; > .accent::after  margin-left: 0.1em; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку "Подсказки" Скопировано

💡 Не забывайте прописывать свойство content для псевдоэлемента : : after . Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 Псевдоэлементы : : before и : : after можно использовать и для более сложной стилизации:

 выбери меня a href="#" class="link">выбери меняa>    Скопировать Скопировано Не удалось скопировать   

 .link  position: relative;> .link::before,.link::after  content: ""; height: 14px; width: 14px; position: absolute; transition: all 0.6s;> .link::before  top: 0; left: 0; border-top: 6px solid #000000; border-left: 6px solid #000000;> .link::after  bottom: 0; right: 0; border-bottom: 6px solid #000000; border-right: 6px solid #000000;> .link:hover::before,.link:hover::after  width: 100%; height: 100%; transition: all 0.3s;> .link  position: relative; > .link::before, .link::after  content: ""; height: 14px; width: 14px; position: absolute; transition: all 0.6s; > .link::before  top: 0; left: 0; border-top: 6px solid #000000; border-left: 6px solid #000000; > .link::after  bottom: 0; right: 0; border-bottom: 6px solid #000000; border-right: 6px solid #000000; > .link:hover::before, .link:hover::after  width: 100%; height: 100%; transition: all 0.3s; >    Скопировать Скопировано Не удалось скопировать   

В этом примере рамки применены к псевдоэлементам : : before и : : after . При этом сами псевдоэлементы используются как два дополнительных стилизуемых элемента внутри ссылки . Круто, правда? В HTML пишем один тег, а по факту можем стилизовать аж три! 🤘

Егор Левченко советует

Скопировать ссылку "Егор Левченко советует" Скопировано

🛠 Псевдоэлемент : : after можно использовать и для того, чтобы вывести важную информацию во время печати. Например, содержимое ссылок, которые есть на странице:

 Узнать больше про псевдоэлементы в Доке a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Докеa>    Скопировать Скопировано Не удалось скопировать   

 @media print  a  text-decoration: none; > a::after  content: " (ссылка: " attr(href) ")"; >> @media print  a  text-decoration: none; > a::after  content: " (ссылка: " attr(href) ")"; > >    Скопировать Скопировано Не удалось скопировать   

Тогда на печати мы получим следующее:

Источник