Breadcrumb Chevrons CSS

[theograd]

Hello everyone,

I’m trying to replicate the chevron breadcrumb code located at: http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html

But can’t seem to get it to work.

My HTML & CSS can be found at the CodePen here:
http://codepen.io/anon/pen/eNWrLj

Basically, what’s going on, is that I’m trying to add the left-side triangular cutout to the breadcrumbs, but it just isn’t working.

The cutout is thrown waaaaay to the left-hand side of the screen for some reason, instead of being where it should be.

I also can’t use left, right, top, any of that to position the left-side triangular cutout because the content of the breadcrumbs is randomly generated. Could be 1 word, could be 3+ words. Never know. Positioning it statically would just be silly and messy.

Any ideas?

Thank you.

[Paulie_D]

You usually need two pseudo-elements sitting on top of one another

http://codepen.io/Paulie-D/pen/WvjyNM/

[Paulie_D]

http://codepen.io/Paulie-D/pen/yNbELx

[theograd]

That’s what I’m not understanding. At the very bottom of my CSS in CodePen, you can see that I’m using the before and after pseudo selectors. I’m honestly very confused.

[Author]

Posts