Welcome back to a new video tutorial.
Today we are going to see how to make an animated line and apply it to our menu links.
This line will be designed with a simple border animation, on hover.
In this tutorial you will learn about important CSS tricks:
1. How to create a CSS pseudo class in CSS Hero.
2. How to apply a hover state to an element.
In this video tutorial, we’ve create a :before pseudo classes from the menu link.
In CSS, you can insert content without using HTML using the ::before and ::after pseudo-elements.
Although the end result is not actually in the DOM, it appears on the page as if it is.
Here, there is a cool CSS Tricks’s article that should address any question about how to use them in your design
Please note that CSS Hero has been powered with an intelligent engine to auto-generate CSS selectors, which 90% of the time works perfectly, and does not require any fix by the user.
But you can always retouch the CSS selector or create your own, to generate a smart CSS stylesheet.
Useful Resources and Links from this tutorial:
w3schools
For a complete list of all the pseudo classes you can visit this link:
https://www.w3schools.com/css/css_pseudo_classes.asp
The Code we’ve uUsed in this Video Tutorial
Here is the code we’ve generated to achieve this cool animation effect.
Feel free to customize it with your design.