Side Navigation Bar with Hover Effects | Pseudo Elements Tutorial

In this video I go over how to create this Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects with pseudo elements. I use the ::before psuedo element property along with the 'data-tooltip' attribute tag to show the navigation bar label on hover.

In this video I show you:
0:33 - Starting HTML Code
1:11 - HTML Code
2:46 - Data-Tooltip Attribute Tag
3:44 - CSS Code
3:55 - Navbar CSS
6:29 - How to make a label with ::before pseudo element
8:10 - How to add a hover effect to a pseudo element

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

#htmlcss #pseudoelements #webdesign

[geryardmon]

Magniloquent in every way!!! Thank you Angela, we dearly appreciate your art. Your work is light like the air up above the clouds, pure, fine, bracing and delicious.... And why shouldn't it be? it is the same the angels breathe. ~ Mark Twain ~

[AgentCell]

I like the fact that you call it hover label and not call outs. It makes more sense naming it hover labels

[douglas.roviano]

Melhor canal de front end que eu encontrei no YOUTUBE!

[marklholloway]

Great tutorial. Easy to follow and clear explanation. Liked and sub’d 👍

[muadzrosli]

Great video! I can learn how to structure the html and then style them👍🏼

[kirillpopov]

So beautiful!!! Thank you for the video!

[CosminCP]

Great tutorial! You can also add "pointer-events: none" to your labels so you can't hover over them

[wahabkazmi]

3rd liker❤ i never compromise in to subscribe someone but you're great love you🌾

[denysbilas]

Hi! You are amazing!Its very important information.I know, it’s simple but very important!Thnx!

[ministerstein]

Do you mean <nav> instead of <navbar>?

[shellykapoor]

Hey Angela I really like your tutorials could you please make tutorial on dashboard using css grid next time

[edonan]

There is an issue with the tooltips appearing when the mouse goes over them when they are not visible. That's because the ::before-element is a child of the element, so hovering it will trigger the hovering of the element itself. A quick fix for that is to make the tooltips unreactive to mouse events: you can do that in CSS by adding `pointer-events: none;` into `&:hover::before`

[cesargeek]

where do you get those SVG? (sorry, so noob)