I tried making an inline list of links separated by | marks. It might be hacky, but I though it should work with using ::before pseudo elements:

li {
  list-style: none;
  float: left;
}
li:not(:first-child) ::before {
  content: "|";
  margin: 0 1em;
}
<ul>
  <li><a href="..">Example 1</a></li>
  <li><a href="..">Example 2</a></li>
  <li><a href="..">Example 3</a></li>
</ul>

It looks about fine, but for some reason the | became part of the link element. It's clickable and highlighted in the same standard blue.

I expected the pseudo element to become the first child of the li element, before the content that consists of the link. What am I doing wrong?

2 Answers

2
Simone On Best Solutions

You literally have an extra space before ::before, if you remove that it looks fine.

li {
  list-style: none;
  float: left;
}
li:not(:first-child)::before {
  content: "|";
  margin: 0 1em;
}
<ul>
  <li><a href="..">Example 1</a></li>
  <li><a href="..">Example 2</a></li>
  <li><a href="..">Example 3</a></li>
</ul>

0
LuSchink On

I think you made a syntax error. This should be:

li:not(:first-child)::before