Separation between words?

Question

css

How to make vertical stripes between words, if through symbols, then how to adapt them? (To avoid them when using collapse?)
Here is an example:

Answer 1

<nav>
  <a href="">Products</a>
  <a href="">Services</a>
  <a href="">Contacts</a>
</nav>

a {
  text-decoration: none;
  color: black;
}

a::after {
  content: "|";
  margin-left: 5px;
}

nav a:last-child::after {
  content: "";
}

Demo: https://codepen.io/meaqese/pen/VweWBvp