Home >Web Front-end >Front-end Q&A >How to display different colors in css li
How to display different colors in css li
- 藏色散人Original
- 2023-01-28 13:48:521594browse
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 twoli: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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement dots in css3Next article：How to implement dots in css3