Solution 1 :

With a pseudo-element

.footer-bottom-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
}

#bottom-menu {
  margin-top: 10px;
  margin-bottom: 10px;
}

#bottom-nav {
  display: flex;
  list-style: none;
  align-items: center;
}

#bottom-nav li {
  flex: 0 1 auto;
  text-align: center;
}

#bottom-nav li:not(:last-child):after {
  content: "|";
  margin-left: 10px;
}

#bottom-nav li+li {
  padding-left: 20px;
}

#bottom-nav li a,
#bottom-nav li a:visited {
  text-decoration: none;
  border: none;
  color: #000;
  font-weight: 400;
}

#bottom-nav li a:hover {
  text-decoration: none;
  border: none;
  color: #c00;
}
<div class="footer-widget footer-bottom-menu">
  <div id="bottom-menu">
    <ul id="bottom-nav" class="bottom-nav">
      <li id="menu-item-142" class="menu-item menu-item-142"><a href="http://localhost/wp/lorem-ipsum-dolor-sit-amet/">About me</a></li>
      <li id="menu-item-143" class="menu-item menu-item-143"><a href="http://localhost/wp/sfdfs-df/">Privacy Policy</a></li>
      <li id="menu-item-144" class="menu-item menu-item-144"><a href="http://localhost/wp/abc/">Contact</a></li>
    </ul>
  </div>
</div>

Problem :

I have a simple UL LI list which looks like following:

.footer-bottom-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
}

#bottom-menu {
    margin-top: 10px;
    margin-bottom: 10px;
}

#bottom-nav {
    display: flex;
    list-style: none;
    align-items: center;
}

    #bottom-nav li {
        flex: 0 1 auto;
        text-align: center;
    }

        #bottom-nav li + li {
            padding-left: 20px;
        }


        #bottom-nav li a, #bottom-nav li a:visited {
            text-decoration: none;
            border: none;
            color: #000;
            font-weight: 400;
        }

            #bottom-nav li a:hover {
                text-decoration: none;
                border: none;
                color: #c00;
            }
<div class="footer-widget footer-bottom-menu">
<div id="bottom-menu">
   <ul id="bottom-nav" class="bottom-nav">
      <li id="menu-item-142" class="menu-item menu-item-142"><a href="http://localhost/wp/lorem-ipsum-dolor-sit-amet/">About me</a></li>
      <li id="menu-item-143" class="menu-item menu-item-143"><a href="http://localhost/wp/sfdfs-df/">Privacy Policy</a></li>
      <li id="menu-item-144" class="menu-item menu-item-144"><a href="http://localhost/wp/abc/">Contact</a></li>
   </ul>
</div>
</div>

The code seems to work. But how can i add a ” | ” between those li items?

The code looks a little bit over-engineered for me, too 🙂

By