Breadcrumb navigation design


.breadcrumb a {
padding: 0 5px;
margin-right: 15px;
background-color: darkcyan;
color: #fff;
text-decoration: none;
text-align: center;
height: 30px;
line-height: 30px;

.breadcrumb a::before, .breadcrumb a::after {
content: “”;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;

Why the border goes inside the padding?


Unsure what kind of result you’re expecting here? Why the borders?


I want to make a breadcrumb navigation bar, creating an arrow effect not using ‘/’ nor ‘>’.


Please provide the full code. HTML and CSS files.