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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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.

Related post:  RoyalSlider – Touch-Enabled jQuery Image Gallery

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

Download Animated CSS Hover Effects

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close