Animated Link Underline

A fun animated effect for your text links.

Example from provided code

You might need to target this code more specific than paragraphs and links, as it may have unintended consequences on things like buttons.

Adjust the background-image and border-bottom to change the colors.

p a{
  color: inherit;
  text-decoration: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
  background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid #ec4911;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

p a:hover{
  background-size: 100% 100%;

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment