<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
.anythingHover{ max-width:800px; margin:50px auto;}
.anythingHover ul{ list-style:none; display:inline-block;}
.anythingHover ul li{ display:inline-block;}
.anythingHover ul li a{ color:#555; padding:5px 15px; text-decoration:none; font-family:arial; position:relative;}
.anythingHover ul li a:after{ position:absolute; width:0; height:3px; background:#0bf; bottom:0; left:0; content:''; transition:all 0.2s}
.anythingHover ul li a:hover:after{ width:100%; transition:all 0.2s}
</style>
</head>
<body>
<div class="anythingHover">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<a href="https://anything-learn.blogspot.com/2018/10/css-hover-effects-navigation.html" style="color:#333; bottom:5px; left:0; right:0; margin:auto; text-align:center; font-family:arial; font-size:11px" target="_blank"><b>Refrence Link:</b> https://anything-learn.blogspot.com/2018/10/css-hover-effects-navigation.html</a>
</body>
</html>