HTML Element Style How to - Hover to change bullet

Question

We would like to know how to hover to change bullet.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul.keren li {<!-- w ww.j  a va 2s. co  m-->
  list-style: square;
}

ul.keren li:before {
  content: "\2714 ";
  display: none;
}

ul.keren li:hover {
  list-style: none;
  position: relative;
  left: -1em;
}

ul.keren li:hover:before {
  display: inline-block;
  font-size: 60%;
  margin-right: 8px;
}
</style>
</head>
<body>
  <ul class="keren">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
  </ul>
</body>
</html>

The code above is rendered as follows: