<!-- パンくずリスト -->
<div class="bread">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>.bread ul {
display: flex;
}
.bread li a {
padding: 5px;
color: #444;
font-size: 16px;
text-decoration: none;
}
.bread li a:hover {
opacity: 0.7;
}
.bread li:after {
content: '\f054';
font-family: "Font Awesome 5 Free";
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
color: #444;
}
.bread li:last-child:after {
content: none;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.