Go to homepage

Projects /

November 26, 2021

Underline Fill Effect

By CodyHouse
404 HTML, CSS, JS components. Download →

How to create a multi-line, underline fill effect in CSS.

You can create interesting effects by animating the background-position property and setting the background-size as a multiple of the element it is applied to (e.g., 200%).

One example is creating a starting underline element and then 'filling' it with a new color.

In CSS, you'll need to:

  1. Set a linear gradient using the background-image property
  2. Set a background size with a 200% width and a height equal to the desired underline height
  3. Set background-repeat equal to no-repeat, otherwise it wouldn't ne possible to 'limit' the background height
  4. Animate the background-position property 
.anim-underline-fx {
  background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
  background-size: 200% 3px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position .3s;

.anim-underline-fx:hover {
  background-position: 0% 100%;

What's great about this effect is that it works with multiple lines of text. 👌

Live demo:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.