"Cool CSS Menu Hover Effects - Using -before and -after pseudo element"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Team</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">contact</a></li> </ul>
body { margin:0; padding:0; font-family: sans-serif; } ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; display:flex; } ul li { list-style:none; } ul li a { position:relative; display:block; padding: 10px 20px; margin:20px 0; text-decoration:none; text-transform:uppercase; color:#262626; font-weight:bold; transition:.5s; } ul li a:hover { color:#fff; text-decoration:none; } ul li a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-top:1px solid #000; border-bottom:1px solid #000; transform: scaleY(2); opacity:0; transition:.5s; z-index:-1; } ul li a:hover:before { transform: scaleY(1.2); opacity:1; } ul li a:after { content:''; position:absolute; top:1px; left:0; width:100%; height:100%; background:#000; transform: scale(0); transition:.5s; z-index:-1; } ul li a:hover:after { transform: scale(1); }

Related: See More


Questions / Comments: