【CSS】パンくずリスト【HTML】

display: flex使用

index.html

@import url('https://fonts.googleapis.com/css?family=Lato');

body {
font-family: 'Lato', sans-serif;
font-size: 21px;
padding: 20px;
background: #073B4C;
}

.cool-link {
margin-right: 5px;
display: inline-block;
}

.cool-link a {
text-decoration: none;
position: relative;
transition: 0.25s ease-in-out;
color: #FFF;
}

.cool-link:hover a {
color: #FFD166;
}

.cool-link a::before {
width: 0;
height: 3px;
background: #FFD166;
position: absolute;
bottom: -5px;
content: "";
}

.cool-link.left-to-right:hover a::before,
.cool-link.right-to-left:hover a::before,
.cool-link.center-to-side:hover a::before {
transition: 0.25s ease-in-out;
width: 100%;
}

.cool-link.right-to-left a::before {
right: 0;
}

.cool-link.center-to-side a::before {
left: 50%;
transform: translateX(-50%);
}

style.css【ぱんくずリストを矢印のように表示する】

body {
margin: 0;
padding: 20px;
background: #94DBF5;
font-size: 16px;
}

.steps {
list-style: none;
display: flex;
}

.step {
white-space: nowrap;
transition: 0.3s ease-in-out;
background: #003459;
position: relative;
height: 50px;
line-height: 50px;
margin-right: 30px;
padding: 0 20px;
}

.step > a {
text-decoration: none;
color: #fff;
}

.step:last-child {
margin-right: 0;
}

.step::before {
transition: 0.3s ease-in-out;
content: "";
position: absolute;
top: 0;
left: -25px;
border-left: 25px solid transparent;
border-top: 25px solid #003459;
border-bottom: 25px solid #003459;
}

.step:first-child::before {
display: none;
}

.step::after {
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
right: -25px;
border-left: 25px solid #003459;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
content: "";
}

.step:last-child::after {
display: none;
}

.step:hover {
background: #007EA7;
}

.step:hover::before {
border-top-color: #007EA7;
border-bottom-color: #007EA7;
}

.step:hover::after {
border-left-color: #007EA7;
}

.step:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.step:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}