All posts

Apply CSS styling to only first two elements

This requires the use of the :nth-child selector, which needs to be passed an argument of -n+2:

a:nth-child(-n+2)::after {
  content: " | ";
}

In my example I am applying text after the first two links in the selector, which looks like this when rendered: Link One | Link Two | Link Three

The problem is when you add a fourth link there exists a style bug because the | is only applied to the first two elements: Link One | Link Two | Link Three Link Four

I added my solution for this here.