place a > before or after list items in your breadcrumbs

breadcrumbs-spacer-before.css

nav.breadcrumbs ul li::before {
  content: ">";
  margin-right: 10px;
}

/* Remove the > from before the first breadcrumb */
nav.breadcrumbs ul li:first-child::before {
  content: "";
  margin-left: 0;
}

This automatically creates something like the following:
Home > About > Team > Zac Gordon

Oh, I see what you're doing. Is there a reason you're not using:

nav.breadcrumbs ul li:first-child:before

?

That does make more sense, and I updated to reflect the more straight forward syntax.

Originally I was doing nth-child(0) cause I thought it was zero indexed, but turns out (1) gives you the first element. Or :first-child as it is now :)

I personally list to put the generated content on the anchor element to increase my hit area a bit. I also like to use ::after so I don't have to reset the generated content (assuming you can set up the last breadcrumb, indicating the current page, to not be a link) e.g.

#breadcrumbs a::after { content:'\2002\003e'; }

ISO codes

Ooh, like that Brad

Hello

there is another way you can use one CSS declaration:

nav.breadcrumbs li+li:before {
content: ">";
margin-right: 10px;
}

regards