I was trying to crate unordered lists and change marker to image. But my marker is don't showing up. I don't know what I did wrong. I need some help.
This is my CSS code:
ul {
list-style-type: none;
padding-left: 50px;
margin-top: 22px;
}
li {
position: relative;
font-size: 17px;
font-weight: 300;
line-height: 24px;
margin-bottom: 10px;
}
li::before {
content: '';
display: block;
position: absolute;
left: -32px;
top: 3px;
width: 21px;
height: 20px;
background: url('../icons/icon_blue_list.svg') center (center / cover) no-repeat;
}
It should be as follows. Also I don't think you need a::before psudo effect
background: url('../icons/icon_blue_list.svg') no-repeat left top;
You should also use the list-style-image property instead
The problem was a syntax problem. Using center/cover no-repeat
would fix it.
ul { list-style-type: none; padding-left: 50px; margin-top: 22px; } li { position: relative; font-size: 17px; font-weight: 300; line-height: 24px; margin-bottom: 10px; } li::before { content: ''; display: block; position: absolute; left: -32px; top: 3px; width: 21px; height: 20px; /* Changed "center (center / cover) no-repeat" */ background: url('https://picsum.photos/200') center/cover no-repeat; }
<ul> <li>1</li> <li>1</li> <li>1</li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.