Recommended reading

Gradually Fill Link Background Color With CSS

July 8, 2019 by Andreas Wik

A hover animation effect for links that I really like is when it’s gradually filled with a background color. Kinda like a magic marker!

Like this:

See the Pen Fill link background with color gradually with CSS by Andreas Wik (@andreaswik) on CodePen.

 

The way it’s done is to manipulate the :before pseudo element for the anchor.

Set its content to nothing, set a background color, and set the position to absolute. Position it in the top left and set the width to 0px. On :hover we change the width to 100%. To get it animated, simply add a transition.

Don’t forget to set the z-index to -1 to create a new stacking order, otherwise the :before pseudo element will be stacked on top, and the text will be hidden.

So, here is the final CSS:

a {
  position: relative;
  text-decoration: none;
  color: green;
}

a:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background: orange;
  transition: all .5s;
  z-index: -1;
}

a:hover:before {
  width: 100%;
}

 

Hope it helps!

Recommended reading

Share this article