::before pseudo element doesn't become first child of originating list element

Question

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?

typo: remove *space* before `::before` see https://jsfiddle.net/jucxwbrs/ — kukkuz, May 13 '19 at 10:18

score 3 · Accepted Answer · answered May 13 '19 at 10:17

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>

score 0 · Answer 2 · answered May 13 '19 at 10:18

0

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

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

answered May 13 '19 at 10:18

Lu Chinke

2

it's not an *error* but simply a different selector – Temani Afif May 13 '19 at 10:28
It becomes a syntax error if it's not working as expected x) – Lu Chinke May 13 '19 at 10:29

2 Answers2