CSS problems with animation? Can't align text in li?

Question

This is incredibly frustrating but I am having problems aligning link text within an li after adding an animation. I took the animation from a menu that was aligned horizontally instead of vertically and have been able to integrate the animation in however my link text skewed as a result.

Each link is within an li. Below is a demo with circle animation:

.menubar {
  position: absolute;
  height: calc(100% - 32px);
  width: 137px;
  left: -140px;
  top: 38px;
  background-color: #52DBA5;
}
.menubutton {
  width: 100%;
  height: 80px;
  padding-top: 0px;
  padding-bottom: 40px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  font-family: "Source Sans", Helvetica, Arial;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  display: block;
  text-decoration: none;
}
/*HERE for menu animations*/

nav {
  width: 100%;
}
nav ul {
  list-style: none;
  text-align: left;
}
nav ul li {} nav ul li a {
  display: block;
  padding: 50px;
  top: 10px;
  text-decoration: none;
  color: #52DBA5;
  text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .3s;
}
nav ul li a:hover {
  color: #52DBA5;
}
nav.circle ul li a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
nav.circle ul li a:after {
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '.';
  color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
nav.circle ul li a:hover:after {
  -webkit-animation: circle 1.2s ease-in forwards;
  padding-right: 50px;
}
/* Keyframes */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* Keyframes */

@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: white;
    border-radius: 100%;
  }
  100% {
    background: white;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
    margin: auto;
    border-radius: 0;
  }
}
.menutext {
  width: 100%;
  height: 20px;
  top: -12px;
  color: #39946f;
  font-family: "source sans pro", , Helvetica, Arial;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

<div class="menubar">
  <nav class="circle">
    <ul>
      <li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">chat</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">settings</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">users</a>
      </li>
    </ul>
  </nav>

  <form class="logoutframe" method="post" id="logout">
    <input class="logout" type="submit" name="logout" value="logout" /></input>
  </form>
</div>

I have tried placing padding and using left and right on menu button, menu text, nav ul li a, everything. Even tried putting text in individual ps within the li. But my text is still not centered in the box that forms on hover:

I need the text ("username", "chat," etc) to be left aligned within the menubar and centered (the text is slightly to the bottom and very much to the right) within the "circle" box that is formed on hover.

How can I do this?

Answer 1

Initially I had misunderstood your question and written a different answer. Below is the correct one.

There are a lot of extra/unnecessary settings in your code but the key reason why you are not able to achieve the left align is because the ul elements always have a default padding associated with it. It pushes the contents of the list to the right by a large value and hence it will look as though alignment is not proper.

If you make the changes that I've indicated in the below snippet, you'd be able to get what you need.

.menubar {
  position: absolute;
  /*height: calc(100% - 32px);
  width: 137px; ideally these should be large enough to accomodate the element */
  /*left: -140px; commented for demo */
  top: 38px;
  background-color: #52DBA5;
}
.menubutton {
  width: 100%;
  height: 80px;
  /*padding-top: 0px;
  padding-bottom: 40px; not required*/
  text-transform: uppercase;
  /*text-align: center; remove this */
  cursor: pointer;
  font-family: "Source Sans", Helvetica, Arial;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  display: block;
  text-decoration: none;
  line-height: 80px; /* add this to vertically center align the text */
}

/*HERE for menu animations*/

nav {
  width: 100%;
}
nav ul {
  list-style: none;
  /*text-align: left; not required as this is default */
  padding: 0px; /* add this */
}
nav ul li {} nav ul li a {
  display: block;
  text-indent: 8px; /* add this to indent just the text without affecting white box */
  padding: 0px; /* change this */
  top: 10px;
  text-decoration: none;
  color: #52DBA5;
  text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .3s;
}
nav ul li a:hover {
  color: #52DBA5;
}
nav.circle ul li a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
nav.circle ul li a:after {
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '.';
  color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
nav.circle ul li a:hover:after {
  animation: circle 1.2s ease-in forwards; /* changed so others can see animation */
  padding-right: 50px;
}

/* Keyframes */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* Keyframes */

@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: white;
    border-radius: 100%;
  }
  100% {
    background: white;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
    margin: auto;
    border-radius: 0;
  }
}
.menutext {
  width: 100%; /* change this */
  /*height: 20px;
  top: -12px; not required */
  color: #39946f;
  font-family: "source sans pro", , Helvetica, Arial;
  font-weight: bold;
  /*text-align: center; remove this */
  text-decoration: none;
}

<div class="menubar">
  <nav class="circle">
    <ul>
     
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">chat</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">settings</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">users</a>
      </li>
    </ul>
  </nav>

  <form class="logoutframe" method="post" id="logout">
    <input class="logout" type="submit" name="logout" value="logout" /></input>
  </form>
</div>