CSS Animation: a dynamic underlined links

Underline links is a very common style, recently made a very simple visual effect is very good, you can see the link below.

http://jsbin.com/zanewe/edit?html,css,output

Creating this effect is very simple, you do not need to add additional elements to the DOM HTML, but need to consider browser compatibility issues in older versions of the browser, it will only appear as an ordinary underlined.

Well, now officially begun. The first thing we need to do is to remove text-decoration, and set up links to relative positioning. We need to ensure that the link does not change color when hover, h2 where we take an example:

h2 > a {
      position: relative;
      color: #000;
      text-decoration: none;
}

h2 > a:hover {
      color: #000;
}

Next, we want to add a border, by changing hide it. Insert a :beforeand set it up scaleX（0）, be conservative, if your browser does not support us visibility: hiddenhide it.

h2 > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
}

Finally animate time 0.3s, now we just need to set the elements hoverdisplayed and scaleX(1):

h2 > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

We're done! ??????

This completes a very dynamic animation underscore

Guess you like