Customize list item bullets using CSS

前端未结

关注

 12  1222

感动是毒 2020-12-15 03:17

Is it possible to change the size of an

element\'s bullet?

Take a look at the code below:

li {
    list-sty


      
      
        
          12条回答        

        
                    
            
            
                         
                
              
              
                
                   鱼传尺愫
                                             
                
                
                (楼主)
            
              
              
                2020-12-15 04:00
              

            
            
                        
In case you do not want to wrap the content in your 
s with s, you can also use :before like this:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}


Adjust your font sizes on the :before to whatever you would like.


  huge bullet
  smaller bullet
  multi line item with custom
 sized bullet
  normal bullet




    
             
                                                        
            
            
              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              
                          
             
       
          
              
                                       
     查看其它12个回答


            
                         
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
                              			
        
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复