How to display different colors in css li

css li display different colors implementation method: 1. Modify the li color through the "ul li::marker {color: #3860f4;}" attribute; 2. Through "li:before {content: "" ;width: 6px;height: 6px;display: inline-block;border-radius: 50%;background: #4F8EFF..." attribute to set the color.

The operating environment of this tutorial: Windows 10 system, css3 version, DELL G3 computer

How to display different colors in css li?

css liModify the color of the small dots

##Method one

          
• {item.tip1}
          
• {item.tip2}
          
• {item.tip3}

 ul li::marker {
          color: #3860f4;
 }

The effect is as follows:

##Method two

li:before {
           content: "";
           width: 6px;
           height: 6px;
           display: inline-block;
           border-radius: 50%;
           background: #4F8EFF;   //这里不是color
           vertical-align: middle;
           margin-right: 14px;}

Recommended learning: "css video tutorial

"

The above is the detailed content of How to display different colors in css li. For more information, please follow other related articles on the PHP Chinese website!