- 10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after
- Что такое псевдоэлементы и зачем они нужны
- Далеко-далеко за словесными горами в стране.
- Вывод
- Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок
- Почему у меня не работает :after/:before на img если прописан путь к картинки?
10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after
Привет, Хабр! Меня зовут Максим Васянович, я спикер курса “Веб-верстка” в Skillbox. Сегодня поговорим о верстке, а точнее — о нюансах работы с псевдоэлементами before и after. Статья будет полезна, прежде всего, начинающим верстальщикам. Но, возможно, и профи будет интересно освежить эти моменты в памяти.
Псевдоэлементы — мощный инструмент для создания дополнительной стилизации элементов. В этой статье посмотрим, для чего их можно использовать и как.
Что такое псевдоэлементы и зачем они нужны
Это дополнения к элементам, которые создаются с помощью CSS. Они не размещаются в разметке, но, если заглянуть в DevTools, их можно найти в разделе Elements.
Использовать псевдоэлементы можно для самых разных целей. Описать все — не хватит и объема небольшой книги, не то что статьи. Так что в этом материале я хочу рассмотреть два полезных псевдоэлемента — ::before и ::after
По умолчанию, псевдоэлементы ::before и ::after делают то, что должны — добавляют нечто до элемента и после элемента. Однако, на практике почти никто не использует эту возможность, т.к. потребность в ней возникает крайне редко. Ниже я расскажу о десяти способах реального использования данных псевдоэлементов в работе.
С помощью псевдоэлементов можно сделать иконки для элементов. Например, для ссылки с телефоном нужно добавить иконку-трубку. Вот простой пример использования этой возможности.
Тут все просто: указываем размеры, дисплей, отступ, а также саму иконку — с помощью background. И самое важное — это свойство content. Да, здесь оно со значением пустой строки (и будет таким почти во всех примерах), однако без него псевдоэлементы вообще не появятся.
У предложенного решения два плюса: мы вынесли иконку в CSS, чем разгрузили разметку, а также создали отдельный класс .link—phone, который всегда будет добавлять эту иконку, если надо.
2.Счетчики на элементах
Нередко в дизайне сайтов встречается набор элементов, которые имеют порядковый номер: 01, 02, 03, 04 и т.п. Представьте, что количество таких элементов каждый день растет, объем контента сайта увеличивается, и с каждым новым блоком вам придется вручную писать каждую цифру. Это крайне неудобно, так что для это цели придумали счетчики, которые реализуются как раз с помощью псевдоэлементов. Давайте разберем на примере:
Здесь нас интересует несколько вещей. Во-первых, для родителя итерируемых элементов (в нашем случае div с классом parent) мы задаем свойство counter-reset. Это, по сути, имя нашего счетчика, который мы далее будем использовать. Можно сюда написать что угодно по смыслу, в нашем случае будет numbers.
Далее, у самих элементов нужно создать псевдоэлемент (before или after — неважно, т.к. мы используем абсолютное позиционирование), и указать в нем два свойства:
- counter-increment: numbers — здесь мы указываем, что значение будет инкриментировано (будет увеличиваться), и название будет то же, что и у counter-reset
- content: counter(numbers) — а здесь запускаем счетчик с помощью CSS-функции counter. Теперь это число будет увеличиваться в зависимости от количества блоков.
Если ваше число должно отличаться особым образом, например не “1, 2, 3”, а “01, 02, 03”, вы можете модернизировать свойство content, напрямую добавив в него число 0. Например: content: “0” counter(numbers).
3.Кастомные чекбоксы и радиокнопки
Как известно, стилизация чекбоксов и радиокнопок — дело непростое. Напрямую стилизовать их нельзя, так что приходится использовать обходные пути. Один из таких путей — использование псевдоэлемента. Посмотрим на пример:
.checkbox < user-select: none; position: relative; cursor: pointer; >.checkbox__text < padding-left: calc(1em + 10px); >.checkbox__input < -webkit-appearance: none; appearance: none; >.checkbox__input::before < content: ''; cursor: pointer; position: absolute; top: -2px; left: 0; width: 1em; height: 1em; border: 3px solid crimson; border-radius: 100%; >.checkbox__input:checked::before
Самое важное — стили инпута и его псевдоэлемента. Сперва мы задаем инпуту appearance: none, внешне скрывая стандартный чекбокс. Затем с помощью псевдоэлемента рисуем простой кружок с бордером. И только когда чекбокс в состоянии checked (то есть нажат, активен), применяем дополнительный стиль, задаем фон кружочку.
4.Обводка с градиентом
Сделать градиент через свойство border крайне трудно, а в некоторых браузерах просто невозможно. Но и здесь можно обойти систему, использовав псевдоэлементы. Посмотрим пример:
.image < position: relative; padding: 5px; width: 400px; >img < max-width: 100%; >.image::before
Тут мы имитируем бордер с помощью градиентного фона, и наложенного поверх него изображения. Благодаря паддингу в 5 пикселей картинка сжимается, а фон под ней проявляется как раз на 5 пикселей с каждой стороны. Внешне это очень похоже на обводку элемента.
5.Кастомные иконки у списка
Через псевдоэлемент можно делать и кастомные иконки для списков. Вы можете использовать даже эмоджи, если это требуется.
Здесь сбрасываются стандартные точки с помощью list-style, а затем с помощью псевдоэлемента добавляется кастомная иконка. Эмоджи вставлен не фоном, как делали ранее, а прямо в свойство content.
6.Эффекты наложения слоев
Частенько на контентных сайтах можно видеть превью статьи с картинкой на фоне и текстом поверх изображения. Чтобы текст был виден пользователю и читаем, поверх картинки удобно делать небольшое затемнение. В этом случае текст будет отлично виден как на фоне темного, так и светлого изображения. Подобные наложения слоя с затемнением (и не только) очень удобно делать при помощи псевдоэлементов. Рассмотрим пример:
Карточка с котом на фоне
Здесь два важных момента — стили заголовка и стили самого псевдоэлемента. Итак, у заголовка задан белый цвет текста, и как вы понимаете, если картинка на фоне будет светлая — текст мы не увидим. Поэтому нужно затемнение.
Чтобы затемнение было под текстом, мы просто поднимем текст — дадим ему position:relative и z-index больше нуля.
Само затемнение, конечно, делаем псевдоэлементом. С помощью position: absolute и свойств top, left, right, bottom со значением 0 мы растягиваем псевдоэлемент на размер родителя, и просто даем ему тень. Получается затемнение.
7.Стилизация кавычек у цитаты
У тега q (тег для небольшой цитаты) по умолчанию есть свои кавычки (кстати, они сделаны псевдоэлементом), которые в 99% случаев не подходят к общему стилю страницы. Раз они уже сделаны через псевдоэлементы — мы легко можем заменить их на свои.
Помимо тега q есть еще и blockquote, который кавычек не имеет. Но если очень хочется, их можно сделать. Пример:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, officia?Далеко-далеко за словесными горами в стране.body < padding: 100px; >.quote < margin: 0; margin-bottom: 100px; display: block; width: max-content; position: relative; >.quote::before < content: open-quote; top: 0; left: 0; >.quote::after < content: close-quote; bottom: 0; right: 0; >.quote::before, .quote::after
Я специально показал здесь и q, и blockquote, чтобы было понятно, что стилями возможно все. Для разных тегов можно написать легко одно и то же.
В общем-то, сейчас кавычки сделаны через content: open-quote, но если хочется — можно использовать бэкграунд-изображение, чтобы сделать абсолютно любые кавычки.
8.Стилизация атрибута alt
Довольно специфический, но иногда очень удобный прием. С помощью псевдоэлемента можно исправить стандартное некрасивое отображение “сломанной” картинки на нормальное.
как выглядит стандартный alt, если картинка не загрузилась.
body < padding: 100px; >.image < position: relative; width: 400px; height: 300px; >img < max-width: 100%; >.image img::before
Самое важное тут — это интересная особенность свойства content. Внутри можно размещать значение атрибутов тега, и это здорово. Например, вы могли бы сделать свои собственные data-атрибуты с каким-то текстом, и вывести его на сайт с помощью content: attr().
9.Геометрические эффекты стилизации (линии, кружочки и т.д.)
Иногда в макетах встречается различные дополнительные эффекты, например, под заголовками секций размещается небольшая линия, которая как бы подчеркивает заголовок. И это тоже можно сделать при помощи псевдоэлемента. Пример:
Далеко-далеко за словесными горами в стране.
body < padding: 100px; >.title < text-align: center; margin: 0; padding-bottom: 30px; position: relative; >.title::after
Здесь создается псевдоэлемент с пустым контентом, с указанием размеров (ширины и высоты) и фона (background). По сути мы нарисовали прямоугольник, который выглядит как линия.
Точно также можно делать круги, квадраты и прочие фигуры, которые есть в макете.
10.Эффекты для состояний элементов
Для состояний элементов (hover, focus, active) можно использовать псевдоэлементы, особенно если эти эффекты нестандартные, со скруглением углов и так далее. Снова посмотрим пример:
body < padding: 100px; >.btn-reset < border: none; padding: 0; background-color: transparent; cursor: pointer; >.btn < box-sizing: border-box; outline: none; position: relative; border-radius: 100px; padding: 17px 32px; font-weight: 700; font-size: 16px; line-height: 16px; color: #fff; background-color: #111; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; >.btn::after < content: ""; box-sizing: border-box; position: absolute; left: -6px; top: -6px; border: 2px solid wheat; border-radius: 100px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; >.btn:focus::after
Здесь создается псевдоэлемент с размером на 12 пикселей большим, чем у родителя. Затем перемещаем его на 6 пикселей, и псевдоэлемент встает четко по центру элемента.
Через псевдокласс :focus визуализируем его, так что получается красивая обводка.
Вывод
В целом, при помощи псевдоэлементов можно выполнять практически любые преобразования и трансформации, если творчески подойти к процессу. Самое важное здесь то, что при использовании этих элементов разметка не раздувается, поскольку отпадет необходимость использования пустых тегов (как часто делают, используя span). Используйте псевдоэлементы, они серьезно упростят вашу жизнь. Удачи!
На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.
Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок
В CSS псевдоэлементы ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку эти элементы, так называемые «замещаемые элементы», специальная категория объектов, описанная в разделе «Рендеринг» стандарта HTML:
Следующие элементы могут быть полностью заменены:
audio, canvas, embed, iframe, img, input, object, video.
Участник CSS Working Group под ником fantasai объясняет это на GitHub:
Замещаемые элементы могут полностью заменить все содержимое элемента, в том числе псевдоэлементы ::before и ::after. Вот почему в замещаемых элементах не работают псевдоэлементы.
Например, невозможно использовать ::before для элемента img, чтобы отобразить альтернативный текст (alt) — при этом метод сработает для других элементах (например на параграфе p).
/* This doesn’t work! */ img::before
В зависимости от браузера и других факторов, элемент img иногда может быть не замещаемым. Например, если изображение не загружается, у нас появляется возможность добавить ::before и ::after к img (эта возможность есть только в Chrome и Firefox).
Ситуация становится более запутанной, когда дело касается элементов формы. Элементы input и textarea, в настоящее время рассматривается как «частично замещенные» — определение, которое использует Tab Atkins (редактор спецификаций CSS) в обсуждениях Working Group на GitHub.
Так или иначе, возможность добавления ::before и ::after для полей ввода зависит от типа input и используемого браузера. Например, Chrome и Safari поддерживают свойство content для input type=»checkbox» и input type=»radio».
input::before < content: '💔'; line-height: 1; vertical-align: top; position: relative; left: -1.5em; >input:checked::before
Если у вас возникли проблемы с использованием ::before или ::after для какого либо элемента, не забудьте проверить, не является ли этот элемент полностью или частично замещаемым элементом.
Почему у меня не работает :after/:before на img если прописан путь к картинки?
У меня вот такая ситуация получилась. Я только учу css еще, но раньше с :after/:before проблем не было, а сейчас у меня получилось так:
Я сверстал блок, расположил поверх img кнопку с помощью :before, и хотел еще добавить тень с помощью :after. Кнопку добавил, и сразу решил прописать ссылку на какой-то имедж-холдер, чтобы img не был пустым, и в этот момент моя кнопка, которая располагалась в левом-верхнем углу, пропала.
Я уже пробовал и с z-index’ом решим эту проблему, но никак.
Почему так получилось, и подскажите, пожалуйста, как это можно решить.
Beautifully Coded
Not just superficial looks, Redux is beautiful behind the scenes too.
.feature < display: inline-block; padding: 7px 35px 21px 0; >.feature img < height: 55px; width: 55px; border-radius: 10px; position: relative; float: left; padding: 0 12px 5px 0; /*overflow: hidden;*/ left: 0; top: 0; >.feature img:before, .feature img:after < content: ''; position: absolute; display: block; >.feature img:before < height: 30px; width: 30px; background: url(../img/sprite.png) 59px 117px; left: -8px; top: -7px; >.feature img:after < left: 0; top: 0; border:1px solid red; >.details < float: left; width: 210px; margin-top: -7px; >.details h3 < font: bold 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #f1eee5; padding: 0 0 7px 0; margin: 0; width: 100%; >.details p < font: 12px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #979797; padding: 0; margin: 0; >