Есть кусочек кода:
<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: “”; каждому псевдоэлементу конкретно, тогда всё в порядке. С чем это может быть связано?