Hamburger icons, used to indicate a mobile menu, are everywhere these days. This simple, three-lined visual (reminiscent of a hamburger bun with the meat in the center, thus the name!) is the universally-known symbol for a menu. Our Logical Imagination site uses one - if you are reading this on a mobile device, you can see it at the top (if not, resize your browser to be really narrow, and you'll see it!)
Most sites that I have worked on include an icon font such as Font Awesome or IcoMoon or one of many others. Almost all font sets include a character that will display a hamburger icon, so it is almost a no-brainer to use that icon for the hamburger menu. Here is the one from Font Awesome:
But recently I was working on a small website that did not need an icon font, and we were reluctant to incur the bandwidth download of an entire font just for a hamburger. So I tried to get the same look with only CSS styling. If you size the element properly, a thick top border and a thick bottom border can give you two bars, but the hamburger traditionally has three bars (surprisingly, a tradition that is older than I thought - all the way back to the early 1980's - read about it here).
That's when I turned to the too-seldom-used :before and :after pseudo element selectors. Using either of them provides a way to get the third bar (and if you wanted a fourth bar, you could use both!)
A simple empty element:
can be turned into a hamburger with only a small amount of CSS.
The first two bars:
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
and the third bar: