.letter-slider {
border-bottom: 4px solid #000;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.15);
padding-bottom: 0.25em;
margin: 1em auto;
position: relative;
font-size:0.9em;
width: 40em;
}
.letter-slider::after{
content: '';
display: table;
width: 100%;
clear: both;
}
.letter-slider input[type="radio"] {
display: none;
}
.letter-slider label {
color: #bebebe;
float: left;
width: 16.6666666667%;
text-align: center;
cursor: pointer;
transition: color .5s;
}
.letter-slider label:hover {
text-decoration: underline;
}
.letter-slider input:checked + label {
color: white;
}
.letter-slider label:last-of-type::after {
display: block;
width: 0;
height: 0;
content: "";
border: 0.6em solid transparent;
border-top-width: 0;
border-bottom-color: #1CA2FF;
position: absolute;
bottom: -5px;
left: 0;
margin-left: -0.6em;
transition: left 0.5s;
}
.letter-slider input:checked:nth-of-type(1) ~ label:last-of-type::after {
left: 8.333333333333332%;
}
.letter-slider input:checked:nth-of-type(2) ~ label:last-of-type::after {
left: 25%;
}
.letter-slider input:checked:nth-of-type(3) ~ label:last-of-type::after {
left: 41.66666666666667%;
}
.letter-slider input:checked:nth-of-type(4) ~ label:last-of-type::after {
left: 58.333333333333336%;
}
.letter-slider input:checked:nth-of-type(5) ~ label:last-of-type::after {
left: 75%;
}
.letter-slider input:checked:nth-of-type(6) ~ label:last-of-type::after {
left: 91.66666666666666%;
}
