Tutorial Gradient Underlines

by in , 0 

a {
   position: relative;
   padding-bottom: 6px;
   }

a:hover::after {
   content: "";
   position: absolute;
   bottom: 2px;
   left: 0;
   height: 1px;
   width: 100%;
   background: #444;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
   background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
   background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
   background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
   }

Reference URL

Leave a Reply