Псевдоэлементы
Вы не создавали этот элемент? А он есть! Всё благодаря CSS.
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоэлементы — это элементы, которых не существует в 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-теги.
0span 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».
Css - Using pictures for pseudo-elements
I found This article but I want to use a picture in ::before and ::after content attribute, not Font Icons. Original:
.icon-dribbble:before, .icon-dribbble:after
The best I've come up so far (Which doesn't work, The pic does show up but It doesn't work as intended like in the article):
.icon-dribbble:before, .icon-dribbble:after
What does "doesn't work as intended" mean? Also, background-repeat:space; is not a valid value for background-repeat AFAIK.
1 Answer 1
The problem is your pseudo elements, with no content in them, have nothing to size themselves to so you'll need to size them manually. Firstly, set their display value to block or inline-block , whichever suits your needs. Then set the height and width to the size of your image, which I'm guessing is 40 pixels square.
Also, you've set a value for the top property, without setting one for position . I've assumed and used absolute below.
NOTE: While the above points still apply, the below has been heavily edited from the orginal solution provided following many clarifications from the asker.
.icon < background:#404040; border-radius:50%; display:block; overflow:hidden; height:60px; position:relative; text-indent:60px; transition:background .5s; white-space:norwap; width:60px; >.icon:hover < background:#3c9; >.icon::before,.icon::after < background-position:center center; background-repeat:no-repeat; background-size:40px 40px; content:""; display:block; height:40px; left:10px; position:absolute; transition:top .5s; width:40px; >.icon::before < background-image:url('http://quran.ksu.edu.sa/images/resize3.png'); top:10px; >.icon::after < /* You'll need a different image below */ background-image:url('http://quran.ksu.edu.sa/images/resize3.png'); top:70px; >.icon:hover::before < top:-70px; >.icon:hover::after < top:10px; >.icon:hover::before