title: How to make an underline animation from the middle if margin:0 auto are not working?
body: <p>when hovering over a menu item i am doing an animated underline by creating a pseudo class. but the underline is left to right and I wanted to make the stripe appear from the middle. I don't understand why margin: 0 auto didn't work. If it need, I worked with bootstrap 5 beta2.</p>
  <pre><code> &lt;style&gt;
      .menu__list {
      text-transform: uppercase;
      justify-content: space-between;
      /*margin-bottom: 36px;*/
  }
  
  .menu__item {
      position: relative;
  }
  
  .menu__item a {
      font-family: 'Open Sans', sans-serif;
      color: #fff;
  }
  
  .menu__item:after {
      content: '';
      display: block;
      margin: 0 auto;
      height: 3px;
      width: 0;
      background: #9a9a9f;
      margin: 0 auto;
      margin-left: -20%;
      position: absolute;
      top: 55px;
  }
  
  .menu__item:hover:after {
      width: 140%;
      transition: all 0.5s ease;
  }
  
  &lt;/style&gt;
  &lt;nav class=&quot;menu&quot;&gt;
                      &lt;ul class=&quot;menu__list d-flex&quot;&gt;
                          &lt;li class=&quot;menu__item&quot;&gt;
                              &lt;a href=&quot;#main&quot;&gt;
                                  Main
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;menu__item&quot;&gt;
                              &lt;a href=&quot;features&quot;&gt;
                                  Features
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;menu__item&quot;&gt;
                              &lt;a href=&quot;gallery&quot;&gt;
                                  Gallery
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;menu__item&quot;&gt;
                              &lt;a href=&quot;team&quot;&gt;
                                  Team
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;menu__item&quot;&gt;
                              &lt;a href=&quot;#&quot;&gt;
                                  Contacts
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
  </code></pre>