Last active
January 13, 2023 01:03
-
-
Save maherelgamil/1ac71adc144e0aa464aa0c934b52718c to your computer and use it in GitHub Desktop.
page separator with only html & css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.page-separator { | |
margin-top: 1.5rem; | |
margin-bottom: 1.5rem; | |
line-height: 1em; | |
position: relative; | |
outline: 0; | |
border: 0; | |
color: #000; | |
text-align: center; | |
height: 1.5em; | |
opacity: .5; | |
width: 100%; | |
} | |
.page-separator:before { | |
content: ''; | |
background: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(#818078),to(transparent)); | |
background: linear-gradient(to right,transparent,#818078,transparent); | |
position: absolute; | |
left: 0; | |
top: 50%; | |
width: 100%; | |
height: 1px; | |
} | |
.page-separator:after { | |
content: attr(data-content); | |
position: relative; | |
display: inline-block; | |
padding: 0 0.5em; | |
line-height: 1.5em; | |
color: #1a1a19; | |
background-color: #fcfcfa; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<hr class="page-separator" data-content="Page No. 11"/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment