How to make a fade effect on Hr line in Html using CSS and align Or in the center over it ?
It's a login Page code, I'm not getting it right when I try to align ( "Or" ) over hr line in center using CSS it does work, but after aligning, when I try to make a fade effect on hr line the line disappears, only ( "Or" ) is visible... CSS Code:- hr{ border-top-color: black; margin-bottom: 25px; width: 80%; position: relative; z-index:4; } hr1::before{ display: block; margin-left: -10%; margin-top: -1px; content:""; background: linear-gradient(to left, black, blue); width: 10%; height: 1px; } hr1::after{ display: block; margin-left: 100%; margin-top: -1px; content:""; background: linear-gradient(to right, black, blue); width: 10%; height: 1px; } .or { width:25px; text-align:center; border-top:-100px; Margin-left:160px; position: relative; z-index: 5; } HTML5 code:- Basic HTML code:- <body> <hr class="hr1"> </hr> </body>
Often have questions like this?
Learn more efficiently, for free:
