I do not know why my navbar animation is not working-CodePudding

I styled my navbar and made transition ease-in-out but it is not working and I do not know why. The ease-in-out animation is not showing whenever I hover over the li a and I cannot find what I did wrong

body {
  margin: 0;
}

.nav-bar {
  width: 100vw;
  background-color: black;
}

.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: white;
  padding-right: 3em;
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: white;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a :hover::after {
  width: 60%;
}

li a:hover {
  color: white;
}

<div>
  <div className="nav-bar">
    <ul className="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

First of all, you won't see anything in your example since all colors are white. So just for the example, I added some colors (green for your <a> and red for your ::after )

You have two problems here:

Problem One - A typo in your :hover selector:
You have a space between your a and :hover selectors which is wrong
li a :hover::after
--------^
Remove that space so that your hover is working li a:hover::after

Problem Two - 60% width of nothing:
When hovering your <a> element, you increase the width of your ::after element from 0% to 60%, but based on what? Your link is display: inline by default and therefore the width of your after element is always 0.
So set your link to display: inline-block or display: block and all is fine.

body {
  margin: 0;
}

.nav-bar {
  width: 100vw;
  background-color: black;
}

.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: green;
  padding-right: 3em;
  position: relative;
  display: inline-block;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: red;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a:hover::after {
  width: 60%;
}

li a:hover {
  color: white;
}

<div>
  <div className="nav-bar">
    <ul className="nav-bar-ul">
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

    <style>
body {
  margin: 0;
}
.nav-bar {
  width: 100vw;
  background-color: black;
}
.nav-bar-ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1em 0;
}

li a {
  text-decoration: none;
  color: white;
  padding-right: 3em;
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0%;
  background-color: white;
  bottom: -1em;
  transition: all ease-in-out 250ms;
}

li a:hover::after {
  width: 60%;
}

li>a:hover {
  color: white;
}
</style>
<body>
<div>
  <div >
    <ul >
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Logo</a></li>
    </ul>
  </div>
</div>
</body>