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 次瀏覽
廣告