Để tạo kiểu cho dấu đầu dòng trong danh sách không có thứ tự, chúng ta có thể sử dụng kiểu danh sách bởi
Cú pháp
Cú pháp của thuộc tính CSS li-style như sau -
li {
list-style: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính CSS li-style.
<!DOCTYPE html>
<html>
<head>
<style>
li {
margin: 3px 0;
padding: 2%;
width: 28%;
line-height: 1.2%;
list-style: none;
border-radius: 5% 0 0 5%;
box-shadow: -10px 2px 4px 0 chartreuse;
color: cornflowerblue;
}
li:hover {
box-shadow: -10px 2px 4px 0 blue!important;
font-size: 1.4em;
}
</style>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: none;
counter-reset: li;
overflow: hidden;
}
li {
margin-right: 10%;
padding: 2%;
width: 15%;
float: left;
line-height: 1.2%;
font-weight: bold;
counter-increment: li;
box-shadow: inset 2px 14px 10px lightblue;
}
li:hover {
box-shadow: inset 6px 14px 10px lightgreen!important;
font-size: 1.4em;
}
li::before {
content: counter(li);
color: seagreen;
display: inline-block;
width: 40%;
margin-left: -2em;
}
</style>
</head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html> Điều này cho kết quả sau
