Breadcrumb navigation design


#1

.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?


#2

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


#3

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


#4

Please provide the full code. HTML and CSS files.