<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a class="active"> Home </a> <br> <br> <a class="nv"> Home class name nv start from left or right </a> <br> <br> <a class="cnv"> Home </a>

.active{ border-bottom:2px solid #cc1402; } .nv{ width:150px; height:50px; position:relative; padding-bottom:10px; } .nv::after { background: #cc1402 none repeat scroll 0 0; bottom: 0; content: ""; height: 3px; left: 0; /* right:0;*/ position: absolute; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 0px; } .nv:hover::after { width: 100%; } /*************************************** ******************************/ a.cnv{ position:relative; padding-bottom:10px;} a.cnv:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } a.cnv::before { background: #cc1402; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } a.cnv::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: 0s; }