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

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

Источник

: : before

Удобный способ создать элемент без дополнительной HTML-разметки.

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

Кратко

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

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

Пример

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

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

Как пишется

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

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

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

Как понять

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

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

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

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

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

   
Внимание! Этот абзац является важным предупреждением!   
Этот абзац является информационным.  div class="message"> p class="warning">Внимание! Этот абзац является важным предупреждением!p> div> div class="message"> p class="info">Этот абзац является информационным.p> div>    Скопировать Скопировано Не удалось скопировать   

 .warning::before  content: "⚠"; margin-right: 0.5em;> .warning::before  content: "⚠"; margin-right: 0.5em; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

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

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

💡 Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.

На практике

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

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

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

🛠 Псевдоэлемент : : before очень часто используют для стилизации нестандартных маркеров списка:

 li::before  content: "💜"; margin-right: 5px;> li::before  content: "💜"; margin-right: 5px; >    Скопировать Скопировано Не удалось скопировать   

🛠 Пример с пустым свойством content :

 li  position: relative; padding-left: 25px;> li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px;> li  position: relative; padding-left: 25px; > li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px; >    Скопировать Скопировано Не удалось скопировать   

Источник