Animated Underline CSS

Last Updated: Jun 27, 2017

Below you will find the code for an animated underline effect. The code targets the menu items, you can adapt the selector to use this animation for every kind of element.

[Disclaimer: We do not offer full support for this kind of customization and you will need to use this code on your own risk.]

nav a::after {
  border-bottom: 3px solid #696969;
  content: '';
  display: block;
  position: relative;
  top: -3px; /* Change the vertical position of the underline */
  transition: width 0.3s;
  width: 0%;

nav a:hover::after,
nav .current-menu-item a::after {
  width: 100%;

This will work for the standard menu and the menu links within the dropdown menu.

Please make sure to change the ‘top’ value on mobile using media queries, as the underline position is different on mobile.

@media (max-width: 979px){
    nav a::after {
          top: 0px; /* Change the vertical position of the underline */
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found