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>

26th May 2021, 5:53 AM
Dilip Nishad
Dilip Nishad - avatar
1 Antwort
+ 1
Check this website: https://www.w3schools.com/howto/howto_css_style_hr.asp It (maybe) has your problem in it.
27th May 2021, 2:42 AM
WolfRanger456 - avatar