Page Widget How to - Create sandwich icon from border

Question

We would like to know how to create sandwich icon from border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#menu {<!--from   w w  w.  ja va  2  s  . co m-->
  position: relative;
}

#menu a {
  padding-left: 20px;
}

#menu a:before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0px;
  width: 12px;
  height: 2px;
  border-top: 6px double #000;
  border-bottom: 2px solid #000;
}

li#menu {
  list-style-type: none;
}
</style>

</head>
<body>
  <li id="menu"><a href="#">Menu</a></li>
</body>
</html>

The code above is rendered as follows: