Thanks for that resource, I was scratching my head a bit! 
I feel like this needed to be split into 3 different parts: breadcrumbs, shapes and pseudo elements. All three together is causing so much confusion. My mind checked out at part 5 of this lesson. Your telling me, not teaching me. Like what?!
1 Like
i didnt get any of it
Thanks. I’d never understood it without this.
Height is there to match the height of the pseudo-element (i.e. triangle). If you comment out the height and line-height, you’ll see that the pseudo-elements boxes are taller than the boxes containing the a text.
Im a bit confused because even if I copy-paste everything I still get the tails to appear inside of the actual crumb.
Not entirely sure how I would make it appear before correctly.
My code is like in the exercise but with the hover color to red to display the above issue.
.breadcrumb a::before {
left: -10px;
border-left-color: transparent;
}
.breadcrumb a::after {
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
}
Is this an issue on my end or have I completely overlooked something?
And how would I make the tail to appear as intended.
Based on CSS Tricks: css-triangle (I needed a visual)
<!DOCTYPE html>
<!--from CSS Tricks with slight modifications-->
<html>
<head>
<style>
/*you specify 3 borders depending on the type of arrow you want */
.arrow-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid red;
margin-bottom: 20px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid orange;
margin-bottom: 20px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid rgb(255, 255, 5);
margin-bottom: 20px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid green;
margin-bottom: 20px;
}
</style>
<title>Breadcrumbs</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
There’s still no explanation as to why we use float left instead of inline-block? really?!
Ahhhh this was so helpful! Thank you!
The before is to ensure that the > does not block the word. the after is to ensure the > is placed on the right of the word. making the >text>
I just copied and pasted from the guidance steps. I did not understand any of the concepts.
It would be better if there was a video explaining clearly about this topic.