📜  如何使用 CSS 装饰箭头中的列表项目符号?

📅  最后修改于: 2021-08-31 08:05:55             🧑  作者: Mango

给定一个项目列表,任务是自定义列表的项目符号样式并将其替换为箭头。

方法 1:按 Unicode字符

  • 首先,我们将关闭列表的默认项目符号样式。
  • 然后我们将在“li::before”选择器的 content 属性中插入箭头字符的Unicode。

例子:



  

    Decorating Bullet Style
  
    
    

  

  
    
    
            
  • Geeks
  •         
  • for
  •         
  • Geeks
  •     
      

输出:

方法二:

  • 我们将在“list-style-image”属性中插入要插入的图像的 URL,以代替默认的项目符号样式。

例子:



  

    Decorating Bullet Style
  
    
    

  

  
    
    
            
  • Geeks
  •         
  • for
  •         
  • Geeks
  •     
      

输出:

参考:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/::before
  • https://unicode-table.com/en/sets/arrow-symbols/