Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies如何使用 CSS 更改列表的项目符号颜色？
要更改列表的项目符号颜色，请使用 ::before 选择器。此外，为了添加颜色，您需要将列表样式设置为无。
设置无序列表
对于我们的示例，我们设置了 <ul> 元素 −
<ul> <li>Cricket</li> <li>Football</li> <li>Tennis</li> <li>Archery</li> <li>Basketball</li> <li>Hockey</li> </ul>
设置列表样式
list-style 属性设置为无 −
ul {
list-style: none;
}
更改项目符号颜色
使用 ::before 选择器并设置项目符号颜色。要显示项目符号，请使用 content: \2022 unicode。颜色使用 color 属性更改 −
ul li::before {
content: "\2022";
width: 1em;
color: orange;
font-weight: bold;
display: inline-block;
margin-left: -2em;
}
显示行内块
上面，我们已将 display 属性设置为值 inline-block。display 建议如何控制元素的布局。在本例中，display 属性的 inline-block 将元素显示为行内块容器 −
display: inline-block;
示例
让我们看一个使用 CSS 更改列表项目符号颜色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style: none;
}
ul li{
font-size: 16px;
font-weight: 500;
}
ul li::before {
content: "\2022";
width: 1em;
color: orange;
font-weight: bold;
display: inline-block;
margin-left: -2em;
}
</style>
</head>
<body>
<h1>Sports</h1>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Tennis</li>
<li>Archery</li>
<li>Basketball</li>
<li>Hockey</li>
</ul>
</body>
</html>
更新于： 2023-11-16
346 次浏览
广告