如何正确制作自己的列表样式？

Question

I made a list in HTML, but instead of default bullets I wanted ballot boxes with check marks, so I added some CSS:

 ul { list-style: none; } li::before { content: "\\2611"; } 

 <ul> <li>Long text</li> <li>Long text</li> <li>Long long text</li> </ul> 

And everything is almost perfect, but when the text in the <li> s takes at least two lines, the second line starts with no space.

In simple words, the first letter of the new line should not be under the bullet but under the first letter of the previous line.

I don't have any clue how to do it.

Answer 1

You can adjust li text-indents and padding to align custom content when necessary.

 ul { list-style: none; } li { text-indent: -20px; margin: 10px 0;} li::before { content: "\\2611"; color: #a00; padding-right: 5px; } 

 <ul> <li>Long text</li> <li>Long text</li> <li>Long long text Long long text Long long text Long long text Long long text Long long text </li> <li>Long text</li> <li>Long long text Long long text Long long text Long long text Long long text Long long text </li> <li>Long text</li> </ul> 

Answer 2

You can add a custom image as a list style. That will take case of the spacing issue as well.

ul {
  list-style-image: url('customimage.gif');
}

Take a look here for more information.