Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nice line movement
<nav class="navigation">
<ul class="menu">
<li class="li"><a href="javascript:void;">Home</a></li>
<li class="li"><a href="javascript:void;">About me</a></li>
<li class="li"><a href="javascript:void;">My Personal Blog</a></li>
<li class="li"><a href="javascript:void;">Contact</a></li>
</ul>
</nav>
@use postcss-custom-media;
@use postcss-nested;
@use cssnext;
/* Font import */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
/* Media query */
@custom-media --min-sm (width >= 768px);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
html,
body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
/*________________________________________________ */
.navigation {
display: flex;
}
.menu {
display: flex;
flex-direction: column;
@media (--min-sm) {
flex-direction: row;
}
}
.menu > li {
@media (--min-sm) {
&:not(:last-child) {
margin-right: 40px;
}
}
}
.menu a {
position: relative;
display: inline-block;
font-size: 20px;
font-weight: 300;
color: #666;
transition: color .2s ease;
padding: 3px 0;
margin-bottom: 10px;
&:hover {
color: #aaa;
&::after,
&::before {
width: 100%;
left: 0;
}
}
}
.menu a {
&::after,
&::before {
content: '';
position: absolute;
top: calc(100% + 5px);
width: 0;
right: 0;
height: 3px;
}
&::before {
transition: width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
background: #2196f3;
}
&::after {
transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
background: #F44336;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.