Seeking help with HTML/CSS to create a centered navigation bar in the header using flex, with an animated underline effect on hover from bottom left to right. Struggling to achieve center alignment and spacing around each item.
Snippet of HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#hobbies">Hobbies</a></li>
</ul>
</div>
</header>
</body>
</html>
CSS Snippet:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
display: flex;
justify-content: center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-block;
margin: 0 10px;
list-style-type: none;
}
Current layout: | About Experience Works Hobbies |
Desired output: About Experience Works Hobbies
Appreciate any assistance!