CSS3 to draw a dynamic link underline method

Link underline is a very common style, recently made a very simple visual effect, very good, full code view.

<! DOCTYPE html>

Creating this effect is very simple and does not require adding additional DOM elements to the HTML, but you need to consider the compatibility of the browser, which in the older version of the browser will only appear as a normal underline.

Okay, now it's officially started. The first thing we need to do is to remove the text-decoration and set the link to relative positioning. We need to make sure the link does not change color when hover, here we take H2 example:

H2 > a {         position:relative;         Color: #000;         Text-decoration:none;   }   H2 > A:hover {         color: #000;   }

Next, we'll add border and hide it through transformations. Insert one: Before and set it ScaleX (0), for the sake of conservatism, if the browser is not supported, we hide it through 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;   }
The last set animation time is 0.3s, now we just need to set the element to display at hover and ScaleX (1):

H2 > A:hover:before {         visibility:visible;         -webkit-transform:scalex (1);         Transform:scalex (1);   }

Done!

This completes a vibrant underline animation.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.