SCSS
body {
display: table;
width: 100%;
height: 100vh;
margin: 0;
background: #222;
font-family: 'Roboto Condensed', sans-serif;
font-size: 26px;
font-weight: 600;
letter-spacing: 5px;
text-transform: uppercase;
}
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 0 20px;
}
span {
position: relative;
display: block;
cursor: pointer;
}
.list__item--yellow {
color: #FFC56C;
}
.list__item--blue {
color: #6EC5E9;
}
.list__item--red {
color: #FF5959;
}
span {
&:before, &:after {
content: '';
position: absolute;
width: 0%;
height: 4px;
bottom: -2px;
margin-top: -0.5px;
background: #fff;
}
&:before {
left: -2.5px;
}
&:after {
right: 2.5px;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
&:hover {
&:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
&:after {
background: transparent;
width: 100%;
transition: 0s;
}
}
}
4 Responses