Create bar with CSS

Question

A client asked to create a menu based on the image below:

How could I make these bars with CSS? I’m using Bootstrap for development.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto main-nav-left">
   <li class="nav-item">Home</li>
   <li class="nav-item">Esportes</li>
   <li class="nav-item">Masculino</li>
   <li class="nav-item">Feminino</li>
   <li class="nav-item">Crianças</li>
   <li class="nav-item">Outlet</li>
   <li class="nav-item">Lançamentos</li>
 </ul>
</div>

Answer 1

I made this option using only the character / but you can create the element you want in ::after of LI

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
ul {
  padding: 10px 0;
  color: #fff;
  margin: auto;
  list-style: none;
  display: flex;
  background-color: green;
  justify-content: center;
}
li {
  position: relative;
}
li:not(:last-child):after {
  content: "/";
  margin-left: 20px;
  margin-right: 20px;
}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto main-nav-left">
    <li class="nav-item">Home</li>
    <li class="nav-item">Esportes</li>
    <li class="nav-item">Masculino</li>
    <li class="nav-item">Feminino</li>
    <li class="nav-item">Crianças</li>
    <li class="nav-item">Outlet</li>
    <li class="nav-item">Lançamentos</li>
  </ul>
</div>