CSS3 method to draw dynamic link underline-CSS Tutorial-php.cn

CSS3 method to draw dynamic link underline

高洛峰

Release： 2017-03-07 14:19:10

Original

1530 people have browsed it

Link underlining is a very common style. I recently made a very simple visual effect, which is very good. Check out the complete code.

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
body{   
  background-color: #000;   
}   

h2{    
  text-align: center;   
  margin-top: 100px;   
}   

h2 > a {   
  position: relative;   
  color: #FFF;   
  text-decoration: none;   
  padding-bottom: 5px;   
}   

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

h2 > a:before {   
  content: "";   
  position: absolute;   
  width: 100%;   
  height: 2px;   
  bottom: 0;   
  left: 0;   
  background-color: #FFF;   
  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;   
}   

h2 > a:hover:before {   
  visibility: visible;   
  -webkit-transform: scaleX(1);   
  transform: scaleX(1);   
}   
</style>
</head>
<body>
   <h2>
     <a href="/">悬停在我上面</a>
   </h2>
</body>
</html>

Copy after login

Creating this effect is very simple, there is no need to add additional DOM elements to HTML, but you need to consider browser compatibility issues in older versions In your browser it will just show up as a plain underline.

Okay, now it officially begins. The first thing we need to do is remove the text-decoration and set the link to relative positioning. We need to ensure that the link does not change color when hovering. Here we take h2 as an example:

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

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

Copy after login

Next, we need to add a border and hide it through transformation. Insert a :before and set it scaleX (0). To be conservative, if the browser does not support it, we hide it with visibility: hidden.

h2 > a:before {   
      content: "";   
      position: absolute;   
      width: 100%;   
      height: 2px;   
      bottombottom: 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;   
}

Copy after login

Finally set the animation time to 0.3s. Now we only need to set the element to display when hovering and scaleX(1):

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

Copy after login

You're done!

This completes a very dynamic underline animation.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to CSS3 methods for drawing dynamic link underlines, please pay attention to the PHP Chinese website!