Page Widget How to - Create Navigation Arrows on Hover

Question

We would like to know how to create Navigation Arrows on Hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- w  w w. ja v  a  2s. com-->
  background: #222;
  padding: 50px;
}

.nav-link {
  color: #336699;
  background: #fff;
  text-decoration: none;
  display: inline-block;
  font-family: arial;
  padding: .5em 1em; font-size; 18 px;
  position: relative;
}

.nav-link:hover {
  background: #eee;
}

.nav-link:hover:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -.5em;
  border-top: .5em solid #eee;
  border-right: .5em solid transparent;
  border-left: .5em solid transparent;
  border-bottom: .5em solid transparent;
  top: 100%;
}
</style>
</head>
<body>
  <a href="#" class="nav-link">link</a>
  <a href="#" class="nav-link">link</a>
  <a href="#" class="nav-link">link</a>
  <a href="#" class="nav-link">link</a>
</body>
</html>

The code above is rendered as follows: