CODEWITHSUNDEEP
csscss-animations
Smithy
Smithy

Reputation: 847

Make CSS underline animation same length as link's text

So I would like to have this underline hover effect to stretch only up to the length of the text that I hover on, and not more than that. I tried to insert some shape with pseudo selector that would cover the overflow if I put for example too long underline which would cover all lengths but can't get it to work as supposed...any ideas perhaps?

Here's link to my codepen: http://codepen.io/anon/pen/jVqqEZ

* {
  background-color: blue;
}

li > a {
  position: relative;
  color: white;
  text-decoration: none;
}

li > a:hover {
  color: white;
}

li > a:before {
  content: "";
  position: absolute;
  width: 70%;
  height: 1px;
  bottom: 0;
  left: -10;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

li > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
/*
li > a:after {
  content: "";
  background-color: yellow;
  height: 10px;
  width: 100px;
}*/

<ul class="menu">
  <li><a href="#about" class="slide-section">About</a></li>
  <li><a href="#works" class="slide-section">Works and stuff</a></li>
  <li><a href="#contact" class="slide-section">Contact</a></li>
</ul>

Upvotes: 0

Views: 1263

Answers (3)

J o
J o

Reputation: 104

Use the following in css:

li > a:before {
...
width: 100%; // not 70 %
...
}

Upvotes: 0

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

* {
  background-color: blue;
}

li > a {
  position: relative;
  color: white;
  text-decoration: none;
}

li > a:hover {
  color: white;
}

li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: -10;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

li > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
/*
li > a:after {
  content: "";
  background-color: yellow;
  height: 10px;
  width: 100px;
}*/
<ul class="menu">
  <li><a href="#about" class="slide-section">About</a></li>
  <li><a href="#works" class="slide-section">Works and stuff</a></li>
  <li><a href="#contact" class="slide-section">Contact</a></li>
</ul>

Upvotes: 1

Pranjal
Pranjal

Reputation: 1118

li > a:before {
   width: 70%; /* initial*/
   width: 100%; /* changed value*/
}

Upvotes: 3

Related Questions