Add | to li tags in menu

Question

Is it possible to add | as the separator to each list element in menu in CSS?

I tried content: "|", but it didn't work.

Menu looks like this:

<ul>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
</ul>

and result is:

link link link link

and I want:

link | link | link | link

I know how to do it in JavaScript, but CSS would be nicer :) Menu is generated automatically and I don't want to mess around with it.

Answer 1

You need to use a pseudo-element for content, like ::before or ::after:

li + li::before {
    content: "| ";
}

Here’s a demo.

As others mentioned though, if you’re looking for a line, use border-(left|right) with padding or margin as necessary.