Home > Article > Web Front-end > CSS3 method to draw dynamic link underline

CSS3 method to draw dynamic link underline

高洛峰Original: 2017-03-07 14:19:101518browse

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>

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;   
}

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;   
}

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);   
}

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to the difference between inline elements and block-level elementsNext article：Detailed introduction to the difference between inline elements and block-level elements

See more

CSS3 method to draw dynamic link underline

Related articles