Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Animate Bullets in Lists using CSS?
To style bullets in an unordered list, we can use the list-style property. We will see examples to animate ordered and unordered lists.
Syntax
The syntax of CSS li-style property as follows −
li {
list-style: /*value*/
}
Style and Animate Unordered List
The following example illustrate CSS list-style property to style the list items in an unordered list i.e. <ul>. To animate it, we have set styles on hover using the :hover selector −
li:hover {
box-shadow: -10px 2px 4px 0 blue!important;
font-size
}
Example
Let us see an example to style and animate an unordered list on a web page −
<!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>
Style and Animate Ordered List
The following example illustrate CSS list-style property to style the list items in an ordered list i.e., <ol>. To animate it, we have set styles on hover using the :hover selector −
li:hover {
box-shadow: inset 6px 14px 10px lightgreen!important;
font-size: 1.4em;
}
Example
Let us see an example to style and animate ordered list on a web page −
<!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>
Updated on: 2023-11-15T18:02:24+05:30
755 Views
Advertisements