如何使用 CSS 更改项目符号的颜色？

为了在 HTML 中呈现没有顺序/序列但彼此相关的数据列表，使用了无序列表。无序列表是使用

标签创建的，每个列表项都是使用
• 标签编写的。使用普通项目符号指出列表项。

  注意：默认情况下，我们无法更改无序列表项目符号的颜色，但我们可以借助其他一些标签和选择器。

  有两种方法可以改变子弹的颜色：

  • 使用额外的标记标签。
  • 使用 Css 样式 ::before 选择器

  默认样式：让我们使用无序列表创建数据列表。

  HTML

  
      
  Welcome to "GFG"
      
  Geeks
      
  For
      
  Geeks
  

  
  
  
  

  输出：
  

  

  普通列表

  CSS 可用于更改这些项目符号，使它们对读者更具吸引力和吸引力。让我们看看如何改变子弹的颜色，让读者更有视觉感。

  添加额外的标记：添加额外的标记后，您可以为列表文本和项目符号设置不同的颜色。在下面的示例中，我们将列表文本包含在一个 span 中，然后定义样式以显示结果。您可以根据需要使用任何 HTML 标签，如 、

  等。

  HTML

  
  
    
  
      
  
    
  
      
  
          
  Welcome to "GFG"
          
  Geeks
          
  For
          
  Geeks
      
  
    
  
  

  
  输出：
  
  

  彩色项目符号列表

  使用 CSS ::before Selector：第一步是通过 CSS 样式去除默认样式。然后为您想要的项目符号内容相应地添加样式。您可以根据需要的设计和间距编辑样式。使用您自己的缩进和颜色样式创建您自己的自定义项目符号。与上一步相比，无需添加额外的标记。旧浏览器不支持“:before”，在这种情况下可能会影响您网站的外观。

  HTML

  
  
    
  
      
      
  
    
  
      
  
          
  Welcome to "GFG"
          
  Geeks
          
  For
          
  Geeks
      
  
    
  
  

  
  输出：
  

  紫子弹