Border Stretch List Hover Animation | CSS Border & Before/After | HTML/CSS/SASS Tutorial | #9

In this video we are going to view one of easy and subtle list hover effect called “Border Stretch”.

We will be using css pseudo classes i.e. :before & :after to create border which stretch independently of each other unlike normal border effects where all borders are lined together.

We will be using properties like before, top, bottom and other css border properties like border-left, border-right etc to create effect where top left border & bottom right borders will stretch independently.

We will also be using css transition to achieve opacity and stretch effect to avoid sudden display of border on hover & non hover state.

These effects are subtle and simple and can be used in various location.

You can find the source code for this project below:

Package includes all html and complete SASS & CSS code. Feel free to use it as you see fit.

!!!! If you liked the video subscribe & hit the like button !!!!

Post Author: hatefull