将 css 无序列表样式化为图像

Question

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;
}

Answer 1

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

Answer 2

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>