Не срабатывает свойство из селектора по атрибутам

Есть кусочек кода:
<ul class="about-us-content"> <li class="about-us-ice"><p>Все наше мороженое изготавливается на собственном производстве, с использованием современного оборудования и проверенных временем технологий.</p></li> <li class="about-us-cow"><p>Закупка ингредиентов производится только у проверенных фермерских хозяйств и компаний, с которыми нас связывает долговременное сотрудничество.</p></li>
Далее идёт ещё пару элементов списка, есть закрывающие теги элементов и всегда списка. Есть спрайт, и кусочек кода CSS:
[class^=“about-us-”]::before {
position: absolute;
top: 0;
left: 0;
width: 49px;
height: 49px;
background-image: url("…/img/spritesheet.png");
}

.about-us-ice::before {
content: “”;
background-position: -10px -404px;
}

.about-us-cow::before {
content: “”;
background-position: -10px -335px;

}

Проблема в следующем: хотел бы задать свойство content: “”; тоже обобщённому селектору [class^=“about-us-”]::before. Однако в таком случае наряду с нужной картинкой на ней же, сверху, отображается самый первый элемент спрайта, который находится ОЧЕНЬ далеко от нужно картинки! Если же задавать content: “”; каждому псевдоэлементу конкретно, тогда всё в порядке. С чем это может быть связано?

Плохо отображается…

Да, это я привык к табулятору, а он здесь не работает и отправилось раньше, чем я хотел. Уже поправил )

Через песочницу бы глянуть… Не подберете какой-нибудь спрайт, чтобы можно было “пощупать” проблему?

Конечно! Попробую через песочницу загрузить фрагмент, пару минут:slight_smile:

Готово: https://thimbleprojects.org/alessio18911/282424
Туда же загружены и спрайт, и фон

Задайте content, как хотели. Я посмотрю, что происходит.

Вот: https://thimbleprojects.org/alessio18911/282424

А то, что для ul тоже псевдоэлемент создается - это так надо, или побочный эффект?

Ох, Вы правы - конечно же, моя глупость!! :relaxed: Спасибо!!!

Это и было причиной проблемы?

Да:blush:

Ладно))

1 лайк