I'm a proud father of two and programmer for more then 15 years. My kids are small so I'm really into parenting right now. A bit of a problem for me is to stay up-to-date with the latest technologies in the Web. I really love my job but I just don't have enough time to look after all these frameworks, libraries or tools. I used to read Twitter, monitor RSS feeds and spend hours reading Reddit or Medium. However, no time for that anymore.

The off-canvas menu is pretty popular nowadays. You know, the little button in the right upper corner which opens the navigation with a slide-in effect. That's what we are going to build in this article. The interesting things is that we are not going to use CSS neither HTML, only JavaScript.

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.