Картинка before css: html — Как вставить картинку с помощью псевдоэлемента before?


11.06.2023 Facebook Twitter LinkedIn Google+ Разное


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.

ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+9.21.0+1.0+3.5+1.0+1.0+

Краткая информация

ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/selector.html#before-and-after

Версии CSS

CSS 1CSS 2CSS 2.1CSS 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?

< html lang = "en" >

   

< head >

     < мета кодировка = "UTF-8" >

< Meta Имя = "Viewport" Содержание =

"шириной =-ширина устройства, первоначальный Scale = 1,0" > > ".

< Название >

Как разместить фоновое изображение

использование псевдоселекторов ::before ?

     title >

   

     < style >

         * {

             margin: 0px;

             padding: 0px;

         }

   

         body {

             text-align: center;

}

H2 {

Цвет: зеленый;

         }

   

       

             ширина: 100vw;

             высота: 100 вх;

             дисплей: гибкий;

             justify-content: center;

             align-items: center;

             цвет: черный;

             вес шрифта: полужирный;

             размер шрифта: 2rem;

}

. Container :: До {

Содержание: '';

            background: url('bg.png') 

                 не повторяющийся центр, центр/обложка;

             позиция: абсолютная;

             непрозрачность: 0,3;

             верх: 0 пикселей;

             слева: 0 пикселей;

             ширина: 100vw;

             высота: 100 вх;

             z-индекс: -1;

         }

   

         span {

             размер шрифта: 2em;

        

     style >

head >

   

< body >

     < раздел класс = "Контейнер" >

Geeksforgeeks < BR > < BR >

Как поместить фоновое изображение. селекторы?

     раздел >

тело

   

html >

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. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Справочник по HTML

Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Comments