CODEWITHSUNDEEP
css
DanielX
DanielX

Reputation: 157

Animate underline on click with just css

I'm trying to animate this underline on mobile too (on click) but i want to make it with css only.

I tried to delay somehow on click, so that animatio would load completely on click.

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

.un:active {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>

Upvotes: 0

Views: 324

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

You can keep the hover and use the active with another background but the animation will work only when the key is pressed. You may decrease the duration to be sure it will end.

This way you will be sure to have the hover animation and the click one:

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
}

.un:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;  
  background-position: right -100% bottom 0;
}

.un:hover,
.un:active:before {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>

Or replace the :active with :focus but you need to pay attention to outline and to tab key:

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
  outline:none;
}

.un:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;  
  background-position: right -100% bottom 0;
}

.un:hover,
.un:focus:before {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}
<span class="un" tabindex="-1">Underlined Text</span>

Another syntax without pseudo element and multiple background:

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  background-position: 
    right -100% bottom 0,
    right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
  position:relative;
  z-index:0;
  outline:none;
}
.un:hover {
  background-position: 
    left -100% bottom 0,
    right -100% bottom 0;
  transition: background-position 0.5s;

}
.un:focus {
  background-position: 
    left -100% bottom 0,
    left -100% bottom 0;
  transition: background-position 0.5s;
}
<span class="un" tabindex="-1">Underlined Text</span>

Upvotes: 1

Pete
Pete

Reputation: 58432

You could try using the :focus pseudo selector - in order for this to work, you need to give your span a tab index:

.un {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:focus {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
  outline:none;
}
<span class="un" tabindex="0">Underlined Text</span>

Upvotes: 1

Related Questions