Horizontal menu with dash separators.

dash-menu.html

<ul class="dash">

  <li class="active">
    <a href="#">	One
								</a>
  </li>
  <li>
    <a href="#">
									Two
								</a>
  </li>
  <li>
    <a href="#">
									Three
								</a>
  </li>
  <li>
    <a href="#">
									Four
								</a>
  </li>
  <li>
    <a href="#">
									Five
								</a>
  </li>
  <li>
    <a href="#">
									Six
								</a>
  </li>
</ul>

dash-menu.scss

.dash {
  width: 100%;
  list-style-type: none;
  text-align: center;
  li {
    display: inline-block;
    padding: 0 7px 0 0;
    @media screen and (max-width: 768px) {
      padding: 0 10px 0 0;
    }
    a {
      text-transform: uppercase;
      text-decoration: none;
      &.active {
        font-weight: 600;
      }
      &:hover {
        text-decoration: underline;
      }
    }
    &.active {
      a {
        font-weight: 700;
      }
    }
    &:after {
      content: " | ";
      padding-left: 7px;
      text-decoration: none !important;
      @media (max-width: 768px) {
        content: " ";
        padding-left: 0;
      }
    }
    &:last-child {
      &:after {
        content: none !important;
      }
    }
  }
}