Quick Design Tips: Animated CSS Underline Hover Examples

Today, I would like to present you some simple, yet effective, CSS underline hover examples which can be used to spice up a bit any given link or title on any web page. Instead of the simple line appearing on hover for links, there are other ways that can be used to indicate a link.

The following CSS effects are created by the WordPress designer, Matthew Scott, and can be really useful if you want to change the default appearance of links. If you want to indicate a title or any other elements on a web page you are coding, these effects can add a pinch of creativity. They are quite easy to implement, as exploit the ::before and ::after selectors.

There are four distinct hover effects: Left-to-Right, Right-to-Left, Inwards and Outwards. You can edit the styles to fit the color palette and design styles of your website. The code created by Matthew is using plain HTML and SCSS. If you prefer a compiled CSS, scroll down to download an example of the effects.

Let’s have a look at them.

See the Pen Animated CSS Underline Hover Examples by Matthew Scott (@matthewscott_) on CodePen.

Download Animated CSS Hover Effects


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *