Как в before вставить картинку css

Как вставить картинку с помощью псевдоэлемента 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; >

Не только текст

Хотя мы рассмотрели, что псевдоэлементы ::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. Символ в качестве иконки

Иконка p::before

Астероид, и это следует подчеркнуть, неустойчив.

Космический мусор гасит сарос, но кольца видны только при 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
Спойлер

Как добавить 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 , вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.

До и после. Селекторы :before :after

Псевдо-атрибут ::before с помощью свойства content позволяет делать вставки перед контентом внутри блока.

Хак1: свойство content обязательно должно быть указано, пусть даже ввиде пустой строки. Хак2: before и after являются inline-новыми пока мы это не поменяем.

Чтобы стало понятнее рассмотрим пример:

p.box < width: 300px; border: solid 1px black; height:80px; line-height:80px; > p.box:before < content: "#"; border: solid 1px black; padding: 10px; margin: 0 10px 0 0; >

Результат можно посмотреть по ссылке http://codepen.io/anon/pen/LNpZgB

Полезное чтиво:

Популярно о псевдоэлементах :Before и :After http://habrahabr.ru/post/154319/
Интересные кнопки с помощью :before :after http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/
Всплывающие подсказки на чистом CSS https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346
Построение «перекошенной» верстки https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
Различные варианты перекошенной верстки https://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/
Пример сайта со «скошенной» версткой с помощью before и after https://www.securitywithoutborders.org/
Пример сайта с «клином» https://codepen.io/kkhenriquez/pen/BpyMJL
Много примеров со скошенными краями https://hackernoon.com/how-to-code-sloped-section-edges-719886601ffd
Еще про скошенные края. Вариант через clip-path https://medium.com/@colinlord/creating-angles-with-clip-path-and-transforms-865c516dd2ef
Много вариантов от CSS-tricks https://css-tricks.com/creating-non-rectangular-headers/

Значение url()

В качестве контента мы можем вставить картинку, но серьезный минус, что мы не можем настраивать её размер.

.box:before < content:url('image.jpg'); >

Альтернативой этому является задание блоку before свойства display:inline-block, задание размеров и фоновой картинки.

.box:before < content:""; display:inline-block; width:100px; height:100px; background-image:url('image.jpg'); >

Значение attr()

С помощью, этого значения можно добавлять данные в верстку через аттрибуты с префиксом data, а CSS автоматом их будет отображать.

div data-name="Vasya"> div> div data-name="Vova"> div> div data-name="Petya"> div>

Теперь добавим css, чтобы именна из атрибута отображались внутри блока.

div[data-name]:before < content: " " attr(data-name) "]"; >

Подробнее об использовании attr в content’e
https://developer.mozilla.org/ru/docs/Web/CSS/attr
Примеры использования attr
https://davidwalsh.name/css-content-attr

div[data-line]:after < content: "[line " attr(data-line) "]"; >

Счетчики counter()

Иногда нам нужно добиться автоматической нумерации элементов. Особенно, когда элементы динамически добавляются. Конечно можно решить эту задачу через JavaScript, но есть реализация через чистый css. Нам понадобится значение для контента counter

Свойство counter-reset инициализирует счетчик. Это свойство как правило ставится в блок, который встречается один раз, например в body.

counter-increment свойство, которое занимается увеличением счетчика

content:counter() — позволяет нам вывести значения счетчика

body < counter-reset: my-awesome-counter; > div < counter-increment: my-awesome-counter; > div:before < content: counter(my-awesome-counter); >

Мы можем увеличивать счетчик более, чем на единицу

li < list-style-type: none; > ol < counter-reset: mysupercounter; > li:before < counter-increment: mysupercounter 2; content: counter(mysupercounter) ". "; >

Задаем стилистику для счетчика

div:before < content: counter(my-awesome-counter, upper-roman); >