Menu Underline from the centre

Friends today I want to go to create the menu with underline from the center. It makes our website very attractive and cool.

You can use your website by changing some HTML and CSS.

HTML Code :

<div class="container">
  
  <header>
    <nav>
      <ul>

        <li>
          <a href="#">Home</a>
        </li>

        <li>
          <a href="#">About</a>
        </li>

        <li>
          <a href="#">Join</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

      </ul>
    </nav>
  </header>
  
</div>

CSS Code :

@import url("https://fonts.googleapis.com/css?family=Saira+Extra+Condensed");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Saira Extra Condensed', sans-serif;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url("https://source.unsplash.com/1920x1080/?nature");
  background-size: cover;
  background-position: center center;
}

header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) -10%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  padding: 0.5rem 0 5rem;
  font-size: 1.25rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-flex;
}

a {
  position: relative;
  padding: 1rem 0 0.5rem;
  margin: 0 1.5rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}
a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%) scaleX(0);
          transform: translateX(-50%) scaleX(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: -webkit-transform 250ms;
  transition: transform 250ms;
  transition: transform 250ms, -webkit-transform 250ms;
}
a:hover::after {
  -webkit-transform: translateX(-50%) scaleX(1);
          transform: translateX(-50%) scaleX(1);
}

Demo | Download