Skip to content

Instantly share code, notes, and snippets.

@gfhuertac
Created December 11, 2019 12:58
Show Gist options
  • Save gfhuertac/1a7498057dadfc3d91c9f38d24bdc85b to your computer and use it in GitHub Desktop.
Save gfhuertac/1a7498057dadfc3d91c9f38d24bdc85b to your computer and use it in GitHub Desktop.
<nav>
<ul class="pagination">
<li class="done">
<a href="#">&nbsp;</a>
</li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>
</nav>
*,*:after,*:before{
box-sizing: border-box;
}
nav {
width: 100%;
text-align: center;
}
nav ul {
display: inline-block;
list-style-type: none;
}
ul{
margin: 0;
padding: 0;
}
.pagination > li{
overflow: hidden;
position: relative;
margin-top: 5px;
width: 60px;
float: left;
list-style: none;
padding: 0;
}
.pagination > li > a, .pagination > li > span{
line-height: 25px;
text-decoration: none;
color: #FFF;
display: block;
text-align: center;
font-weight: bold;
position: relative;
}
/*positon the circle*/
.pagination > li > a:before, .pagination > li > span:before{
content:'';
position: absolute;
z-index: -1;
width: 25px; height: 25px;
left: 50%; margin-left: -13px;
border-radius: 100%;
border: 1px solid #FFF;
background: #CCC;
transition: all .2s;
}
.pagination > li.done > a:before, .pagination > li.done > span:before{
background: blue;
}
.pagination > li.done > a:after, .pagination > li.done > span:after {
content: " ";
display: block;
width: 8px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
position: absolute;
left: 25px;
top: 5px;
margin-top: -2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*positioning the line*/
.pagination > li:not(:last-of-type):after,
.pagination > li:not(:first-of-type):before{
content: '';
position: absolute;
background: #CCC;
top: 13px;
height: 1px;
}
.pagination > li:first-of-type:after{
left: 50%;
right: 0;
margin-left: 15px;
}
.pagination > li:not(:first-of-type):before{
left: 0;
right: 50%;
margin-right: 15px;
}
.pagination > li:not(:first-of-type):after{
right: 0;
left: 50%;
margin-left: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment