如何仅使用CSS在HTML列表中设置项目符号颜色（） _列表

给定项目符号的无序列表(UL), 我们需要使用CSS更改列表中项目符号的颜色。
注意：不允许使用任何图像或跨度标签。
首先, CSS中没有直接的方法可以更改无序列表中项目符号的颜色。但是, 要使用CSS更改无序列表中项目符号的颜色, 我们必须首先放弃默认的列表样式, 然后手动定义内容那来了之前列表中的每个列表项。
此内容是要用于列表的项目符号类型的Unicode。不同项目符号样式的Unicode字符如下：

Square:” \ 25AA”
Circle:” \ 2022″
Disc:” \ 2022″

以下是一个示例CSS代码, 该示例代码从HTML的无序列表中删除了默认样式并使用了unicodes：

ul{ /* Remove default bullets */ list-style : none ; }ul li::before {/* Add Unicode of the bullet */ content : ; /* Color of the content -- bullet here */ color : green ; /* Required to add space between the bullet and the text */ display : inline- block ; /* Required to add space between the bullet and the text */ width : 1em ; /* Required to add space between the bullet and the text */ margin-left : -0.9em ; }

下面的程序说明了上述更改列表项目项目符号颜色的方法：
例子1:

< html> < head> < title> Changing Bullet Colors< /title> < style> h3{ color:green; }ul{ list-style: none; }ul li::before {/* \2022 is the CSS Code/unicode for a disc */ content: "\2022"; color: green; display: inline-block; width: 1em; margin-left: -0.9em; font-weight: bold; font-size:1.1rem; } < /style> < /head> < body> < h3> Geek Movies< /h3> < !-- Create an Unordered List --> < ul> < li> Star Wars< /li> < li> Back to the future< /li> < li> Ghostbusters< /li> < li> The princess bride< /li> < li> Shaun of the dead< /li> < /ul> < /body> < /html>

输出如下：

文章图片
示例2：

< html> < head> < title> Changing Bullet Colors< /title> < style> h3{ color:green; }ul{ list-style: none; }ul li::before {/*\25E6 is the CSS Code/unicode for a circle */ content: "\25E6"; color: green; display: inline-block; width: 1em; margin-left: -0.9em; font-weight: bold; font-size:1.1rem; } < /style> < /head> < body> < h3> Geek Movies< /h3> < !-- Create an Unordered List --> < ul> < li> Star Wars< /li> < li> Back to the future< /li> < li> Ghostbusters< /li> < li> The princess bride< /li> < li> Shaun of the dead< /li> < /ul> < /body> < /html>

输出如下：

文章图片
示例3：

< html> < head> < title> Changing Bullet Colors< /title> < style> h3{ color:green; }ul{ list-style: none; }ul li::before {/* \25AA is the CSS Code/unicode for a square */ content: "\25AA"; color: green; display: inline-block; width: 1em; margin-left: -0.9em; font-weight: bold; font-size:1.1rem; } < /style> < /head> < body> < h3> Geek Movies< /h3> < !-- Create an Unordered List --> < ul> < li> Star Wars< /li> < li> Back to the future< /li> < li> Ghostbusters< /li> < li> The princess bride< /li> < li> Shaun of the dead< /li> < /ul> < /body> < /html>

【如何仅使用CSS在HTML列表中设置项目符号颜色（）】输出如下：