Как вставить картинку с помощью псевдоэлемента before?
В примере не видно разметки, поэтому сразу стоит оговорить, ::before и ::after есть только у парных тегов. У img, input и прочих они не будут работать.
content: «../img/services_ball.png»; — Ваша ошибка здесь. В content обычно записывается текст. И CSS не может узнать, что переданный текст вдруг оказался картинкой. Для этого ему нужно прямо указать об этом, через:
Минусы такого варианта:
- Нельзя менять размеры картинки,
- В content можно было бы прописать дополнительный текст поверх картинки, но он уже занят картинкой.
• background-image: url(«my-img.png») — Поэтому, можно задать псевдоэлементу конкретные размеры и разместить картинку как фон:
.bubu < position: relative; /* Это важно, если псевдоэлемент нужно позиционировать относительно этого блока */ width: 100px; height: 100px; background: orange; >.bubu::after < content: ""; /* В любом случае необходим, даже пустой. Иначе не будет работать */ position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-image: url('https://i.imgur.com/MJekAr4.gif'); background-size: 100px 100px; box-shadow: 1px 1px 5px #000; >5 приемов с псевдоэлементами before after CSS 3
Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.
Мы все знаем, что эти классы и элементы используются как часть CSS3 . Данные псевдоэлементы были определены в CSS3 .
Псевдоклассы и псевдоэлементы CSS — в чем разница?
Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. А также эффекты CSS , которые не могут быть заданы с помощью конкретных селекторов.
Например, :hover, :active
Псевдоэлемент : Используется для создания новых элементов, которые не существуют в документе, они управляются как обычный селектор.
Например, ::after, ::before
Для псевдоклассов мы используем одно двоеточие ( : ), а для псевдоэлементов — двойное ( :: ), которое является частью синтаксиса CSS3. Браузеры поддерживают оба типа синтаксиса, но в IE ( ниже 9 версии ) не поддерживается формат двойного двоеточия ( :: ).
Важным свойством псевдоэлементов hover active CSS является content: “ ” .
Значения свойства content :
content: «»
content: «любое конкретное значение»
Теперь рассмотрим приемы работы с псевдоэлементами.
Метод 1: Псевдоэлементы со шрифтом Awesome
Согласно последним тенденциям веб-дизайна, большинство сайтов используют Font Awesome для создания шрифтов иконок, а не изображения. Что увеличивает скорость загрузки сайта.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Как добавить SVG в свойство content псевдоэлементов ::before или ::after
SVG это современный формат для векторной графики. Его можно использовать для добавления графики на страницы сайта, классическим способом, как ссылку на отдельный файл, так и внедрив содержимое этого файла непосредственно в HTML код, ведь SVG это валидный HTML5.
Что такое ::before и ::after
Это псевдоэлементы, которых нет в HTML файле, но которые можно добавить с помощью CSS и использовать для стилизации страниц сайта, почти как обычные элементы, как div или span. Их удобно использовать для добавления контента в страницу, когда HTML код не доступен или его структура не должна изменяться.
SVG и псевдоэлементы
В чем суть проблемы и зачем вообще использовать SVG в ::before и ::after ? Чтобы было легче ответить, разобьём этот вопрос на насколько.
Почему SVG? Он легкий и масштабируется, его удобно использовать в качестве пиктограмм для иконок, к тому же, все современные браузеры его поддерживают.
Почему псевдоэлементы и content ? На самом деле это не обязательно. С тем же успехом, можно использовать свойство background-image, любого другого доступного элемента, но если это свойство уже используется, а HTML нельзя модифицировать, то только псевдоэлементы и свойства background-image или content , что удобней или доступно.
SVG в свойстве content
Итак, с долгим лирическим отступлением закончили, приступим непосредственно к решению задачи, которая ставится заголовком этой статьи.
У нас есть тестовый элемент , который используем для добавления псевдоэлемента и svg иконки:
#test-icon::before < content: url("data:image/svg+xml;charset=UTF-8,"); display: inline-block; width: 24px; height: 24px; > На что следует обратить внимание и возможные причины почему иконка SVG не показывается на странице:
- Между url(» и «); не должны быть двойных кавычек, все они заменены на одинарные.
- Наличие правильного MIME типа image/svg+xml .
- Наличие xmlns=’http://www.w3.org/2000/svg’ version=’1.1′ .
- Свойства height=’24’ и width=’24’ указываются без единиц измерения.
- В свойстве fill не должно быть символа решетки ( # ), для указания цвета. Ее нужно заменить кодом ‘ %23 ‘ (как в данном примере) или указывать цвет словами, например, white , purple , red и т.д.
Пытливый веб разработчик заметит, а почему не указать просто ссылку на файл: url(«path/to/svg/icon.svg»); . Да так можно, но этим мы создаем дополнительный HTTP запрос к серверу, что негативно влияет на скорость загрузки.
При использовании этого подхода можно редактировать иконку прямо из CSS, и даже без использования векторного редактора, правда это справедливо для SVG иконок, в которых используются простые фигуры, например, circle , rect , line , возможно polyline . Если там есть только path , вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.
Не только текст
Хотя мы рассмотрели, что псевдоэлементы ::after и ::before выводят текст, они могут делать не только это, а выводить ещё кавычки, изображения, нумерацию и значения атрибутов. Все эти возможности заложены в свойство content , которое работает в связке с псевдоэлементами.
Кавычки
Кавычки можно непосредственно выводить как текст, но у свойства content для этой цели есть специальные значения: open-quote — для открывающей кавычки и close-quote — для закрывающей. Вид кавычек задаётся в свойстве quotes, причём можно сразу определить сами кавычки и вложенные кавычки. В русском языке традиционно используются «ёлочки», а внутренние кавычки обозначаются «лапками», итого получается четыре вида кавычек (рис. 1).
Рис. 1. Вложенные кавычки
«Ёлочки» мы выводим через свойство content , добавляя его к псевдоэлементам, а «лапки» применяются браузером автоматически для элемента , как показано в примере 1.
Пример 1. Кавычки в цитате
Изображения
Для вывода изображений у свойства content следует указать ключевое слово url , а в круглых скобках написать адрес картинки. Аналогично работает свойство background-image , так что синтаксис должен быть знаком.
В примере 2 мы создаём форму для поиска, где вместо кнопки применяется картинка лупы (рис. 2). Поскольку картинку мы выводим непосредственно на кнопке, сохраняется весь функционал поиска — в поле можно вводить текст, по кнопке можно щёлкать.
Рис. 2. Иконка лупы на кнопке
Пример 2. Вывод иконки
На деле свойство content для вывода изображений проигрывает традиционному background , у которого намного больше возможностей, вроде позиционирования и масштабирования картинки. Так что content для отображения изображений применяется редко.
Нумерация списков
При создании нумерованных списков напрямую нельзя изменить стиль чисел, отображаемых перед пунктами. Поэтому идут на хитрость — прячут исходную нумерацию и создают новую с помощью ::before . При этом мы легко можем задать своё произвольное оформление нумерации (рис. 3).
Рис. 3. Стиль чисел в списке
Для начала убираем нумерацию через list-style со значением none , добавляя это свойство к селектору ul . Затем воспользуемся свойством counter-increment для создания новой нумерации. Вывод чисел возложим на ::before через свойство content и значение counter , а остальные свойства нужны для оформления этих чисел.
В примере 3 числа в списке выводятся в синем прямоугольнике белым цветом.
Пример 3. Нумерация списка
Атрибуты
Свойство content позволяет выводить содержимое любых атрибутов у элементов через ключевое слово attr . В частности, так можно вывести адрес ссылки, как показано в примере 4. Обратите внимание, что кроме самого значения атрибута допустимо показывать и произвольный текст, так что адрес для красоты отображается внутри квадратных скобок.
Пример 4. Вывод адреса ссылки
Результат данного примера показан на рис. 4. Поскольку ::after выводит содержимое внутри элемента, а не после него, то отображаемый адрес является частью ссылки и на него можно щёлкать для перехода по ссылке.
Рис. 4. Вывод адреса ссылки
Иконки
Иконки могут быть не только графическими, но и в виде текстовых символов. Это даёт несколько преимуществ:
- текст можно масштабировать без потери качества;
- текст легко окрасить в желаемый цвет;
- к тексту можно применить разные эффекты, вроде тени.
Множество готовых символов, подходящих в качестве иконки, можно найти на сайте utf8icons.com. Достаточно скопировать символ и вставить его как значение свойства content . В примере 5 перед каждым абзацем добавляется серого цвета иконка.
Пример 5. Символ в качестве иконки
Астероид, и это следует подчеркнуть, неустойчив.
Космический мусор гасит сарос, но кольца видны только при 40–50.
Результат данного примера показан на рис. 5.
Рис. 5. Вид абзаца с иконкой
Хотя UTF поддерживает разнообразные символы, их явно недостаточно для большинства задач и требуется что-то ещё. На сайте fontello.com можно найти несколько сотен текстовых иконок. Выбираете желаемые иконки и скачиваете их в виде архива, содержащего требуемые шрифты и стилевые файлы.
Сам набор шрифтов для разных браузеров подключается через @font-face, а сама иконка добавляется через ::before и код символа, как показано в примере 6.
Пример 6. Иконка Fontello
Результат данного примера показан на рис. 6.
Рис. 6. Вывод своей иконки
См. также
- content
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибуты ссылок
- Добавление тени
- Использование в вёрстке
- Очистка float
- Подробнее о позиционировании
- Псевдоэлемент ::after
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Семантика строчных элементов
- Синтаксис CSS
- Спойлер