I will show you how to change bullet color on hovering list item.
This example make use of Pseudo Class :before
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
ul {
list-style: none;
}
ul li a {
color: #ccc;
}
ul li:before {
content: "\002022";
padding-right: 7px;
color: #ccc; /* or whatever color you prefer */
}
ul li a:hover, ul li:hover:before {
color: red !important;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item1</a></li>
</ul>
</body>
</html>
Output:
No comments:
Post a Comment