Embedded Files
The previous exercise demonstrated the most basic styling for breadcrumbs. When designing your own site, you’ll need to make a judgment call if this approach is sufficient. If you want to invite the user to interact with the breadcrumbs, you can style them to make them a more prominent part of the page design.
The example below makes use of a couple of CSS tricks to create an arrow effect. We’re using the ::before and ::after pseudo-elements to add filled rectangles (with empty content) before and after each list item:
.breadcrumb li a::before, .breadcrumb li a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
By setting a portion of the border to transparent, it creates the “tail” of the arrow:
.breadcrumb li a::before {
left: -10px;
border-left-color: transparent;
}
This effect works because the element borders are drawn from the center of the element. We use similar CSS to draw the head of the arrow.
We’ll walk through the individual steps in the exercises so you can see how each step affects the resulting look.
Instructions
Instructions
1.In the pane to the right, breadcrumb.css contains the styles from our previous breadcrumb implementation. Remove the existing “>” symbols from between the list items.
2. Replace the .breadcrumb a CSS section with:
.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}
Change the existing .breadcrumb li from display: inline to float: left:
.breadcrumb li {
float: left;
}
In the browser, you should see that we have created the “body” of the arrows.
3. Next, we create the before and after pseudo-elements. Copy the following CSS and see how it affects the output:
.breadcrumb a::before,
.breadcrumb a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
You’ll notice that we have added pseudo-elements, but they are on top of our existing elements.
4. The total width of our pseudo-elements is 10px, since the border has 5px on the left and 5px on the right. Given this, move the pseudo-elements to the proper location using the following CSS:
.breadcrumb a::before {
left: -10px;
}
.breadcrumb a::after {
left: 100%;
}
5. The last step is to use the CSS trick to turn these into arrows. Style the after elements as “heads” by setting the border color to transparent except for the border-left-color:
.breadcrumb a::after {
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
}
6. Style the before elements as “tails” by setting the border-left-color to transparent for the :before elements.
7. These breadcrumbs are looking how we want, but lets add a hover state for a little more style:
.breadcrumb a:hover {
background-color: blue;
}
.breadcrumb a:hover::before {
border-color: blue;
border-left-color: transparent;
}
.breadcrumb a:hover::after {
border-left-color: blue;
}
Page updated
Report abuse