Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Simple animated underline

June 5th, 2015
Categories: Blog, CSS, Development, Hand coded, HTML, Sass | Tags:

I’ve mainly used this effect for highlighting navigation links when a page is currently being used, or when another navigation link is being hovered over.

You can see it in action here:

The CSS behind this is pretty straightforwards but the trick is to ensure that you have a border, with no height, set to begin with to ensure the animation is shown when hovering on and off the link. Without this 0px border in place the effect will jump to the hovered state.

I’ve used a bottom border in the example code below:

The Sass mixin creates vendor prefixes for the CSS output as well as taking care of all other transitions used at a later date with different values.

You should be able to see that it’s a pretty simple and straightforward effect to created. The key is to have the 0px border already set to ensure the animation works.

See it in action on CodePen here:

See the Pen Animate underline by Scripted Pixels Ltd (@kambanwait) on CodePen.


Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd