在不使用span的情况下更改HTML列表的项目符号颜色

如果您可以使用图像,那么您可以这样做.如果没有图像,您将无法仅更改项目符号的颜色,也无法更改文本.

使用图像

li { list-style-image: url(images/yourimage.jpg); }

看到

列表样式图像

不使用图像

然后,您必须编辑HTML标记并在列表中包含一个范围,并使用不同的颜色为li和span着色.

我们可以结合list-style-image使用svgS,我们可以在CSS内联!这种方法提供了令人难以置信的"子弹"控制,它可以成为任何东西.

要获得一个红色圆圈,只需使用以下css:

ul {
  list-style-image: url('data:image/svg+xml,');
}

但这只是一个开始.这允许我们用这些子弹做任何我们想要的疯狂事情.圆形或矩形很容易,但你可以随身携带的任何东西都svg可以粘在那里!看看下面的靶心示例:

ul {
  list-style-image: url('data:image/svg+xml,');
}
ul ul {
  list-style-image: url('data:image/svg+xml,');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,');
}

  

    Big circles!

    

      
Big rectangles!
      
b
        

          
Small circles!
          
c
            

              
Small rectangles!
              
b
            
          
        
      
    
  
  
b



  
Bulls
  
eyes.



  
Multi
  
color

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

li {
  color: blue;
}

li::first-line {
  color: black;
}

  
House
  
Car
  
Garden

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}