<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div>

body { margin:0; padding:0; font-family:sans-serif; } ul { position:absolute; top:50%; left:50%; display:flex; margin:0; padding:0; transform:translate(-50%,-50%); } ul li { list-style:none; } ul li a { position:relative; display:block; text-align:center; margin:0 25px; color:#262626; font-size:30x; text-transform:uppercase; transition:.5s; padding:5px 10px; } ul li a:hover { color:#fff; background:#e91e63; text-decoration:none; } ul li a:before { content:''; position:absolute; bottom:12px; left:12px; width:12px; height:12px; border:3px solid #e91e63; border-width:0 0 3px 3px; transition:.5s; opacity:0; } ul li a:after { content:''; position:absolute; top:12px; right:12px; width:12px; height:12px; border:3px solid #e91e63; border-width:3px 3px 0 0; transition:.5s; opacity:0; } ul li a:hover:before { bottom:-12px; left:-12px; opacity:1; } ul li a:hover:after { top:-12px; right:-12px; opacity:1; }