Картинка before css: html — Как вставить картинку с помощью псевдоэлемента before?
11.06.2023
Разное
html — Не вставляется картинка перед списком через ::before
Вопрос задан
Изменён 8 месяцев назад
Просмотрен 47 раз
Я совсем новичок, не могу найти ошибку в коде.
Не получается увидеть изображение, которое я пытаюсь подвязать через ::before
перед пунктами списка.
Картинка в коде распознается (проверила через f12, браузер ее видит). Проблема в том, что никак не получается задать ::before
высоту — ширина меняется, а высота ни в какую.
Не помогли ни разные единицы измерения, ни transform
, ни overflow
, ни манипуляции с background-size
, ни смена самой картинки на большой/маленький размер или на png.
Валидатор ошибок не нашел.
Нужно именно через псевдоэлемент. Хеелп!!
<ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
.list li{ margin: 0 0 10px 0px; max-width: 300px; min-height: 20px; } .list li::before{ content: ''; display: block; background: url('../img/icon2.svg') 0 0/20px 20px no-repeat; overflow: visible; }
- html
- css
- псевдоэлемент
2
display:flex
для <li>
, чтобы стояли в ряд, а у псевдоэлемента явно задать ширину и высоту
.list li{ margin: 0 0 10px 0px; max-width: 300px; min-height: 20px; display: flex; } .list li::before{ content: ''; display: block; background: url('../img/icon2.svg') 0 0/20px 20px no-repeat; width: 20px; height: 20px; margin-right: 5px; }
<ul> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul>
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Псевдоэлемент :before | htmlbook.

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
8.0+ | 1.0+ | 4.0+ | 9.2 | 1.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ |
Краткая информация
Применяется | Ко всем элементам |
---|---|
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#before-and-after |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
Для :before характерны следующие особенности.
- При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
- При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
- :before наследует стиль от элемента, к которому он добавляется.
Синтаксис
элемент:before { content: «текст» }
Значения
Нет.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>before</title> <style> li:before { content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ } li { list-style: none; /* Убираем исходные маркеры */ } </style> </head> <body> <ul> <li>Альфа</li> <li>Бета</li> <li>Гамма</li> </ul> </body> </html>
В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.
Рис. 1. Использование псевдоэлемента :before в списках
Браузеры
Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.
Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.
Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.
Псевдоэлементы
CSS по теме
- Псевдоэлемент :before
Статьи по теме
- Как применить трансформацию CSS3 к фоновым картинкам
- Как сделать ленты на CSS3 без картинок
- Начинаем работать с CSS-счётчиками
- Псевдоэлементы
Рецепты CSS
- Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?
- Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
- Хочу изменить вид маркера на другой символ.
Как это сделать?
Как разместить фоновое изображение с помощью псевдоселекторов ::before в CSS?
|
CSS :: Предыдущий перед селектором
❮ 904 Справочник по селекторам CSS Далее ❯
Пример
Вставьте текст перед содержимым каждого элемента
:
p::before
{
content: "Читать это: ";
}
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Селектор ::before
вставляет что-то перед содержимым каждого выбранного элемента(ов).
Используйте свойство содержимого, чтобы указать содержимое для вставки.
Используйте селектор ::after, чтобы вставить что-то после содержимого.
Версия: | CSS2 |
---|
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
Селектор | |||||
---|---|---|---|---|---|
::до | 4,0 | 9,0 | 3,5 | 3.1 | 7,0 |
Синтаксис CSS
::before {
объявления css ;
}
Дополнительные примеры
Пример
Вставьте содержимое перед каждым содержимым элемента
и задайте стиль для вставленного содержимого:
р::до
{
content: "Читать это -";
красный цвет;
вес шрифта: полужирный;
}
Попробуйте сами »
Связанные страницы
Учебник CSS: Псевдоэлементы CSS
Справочник по селектору CSS: CSS ::after selector
❮ Предыдущий Справочник по селекторам CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Leave a Comment