Tạo hiệu ứng Underline động cho link bằng CSS

Bạn có thể tạo hiệu ứng gạch chân (Underline) động khi rê chuột vào một liên kết hoàn toàn bằng CSS.

Khi rê chuột vào sẽ có một làn gạch chân chạy từ giữa ra hai bên.

Nếu trình duyệt không hỗ trợ thì đường gạch chân sẽ hiển thị sẵn.

Dưới đây là code CSS:

a.animating-link {
position: relative;
color: #000;
text-decoration: none;
}
a.animating-link:hover {
color: #000;
}
a.animating-link: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;
}
a.animating-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

Xem demo và tải code về theo link bên dưới: