"sidebar css after before awesome css effect"
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <aside> <ul> <li><span>Home</span><span></span></li> <li><span>About</span><span></span></li> <li><span>Portfolio</span><span></span></li> <li><span>Contact</span><span></span></li> </ul> </aside>
body { width:100%; height:100%; margin:0; padding:0; font-family:'Roboto slab', serif; position:absolute; background:#ff0000; } ul li, ul li span:last-child { transition:all 500ms; } aside { width:300px; background:#111; height:100%; Position:fixed; top:0; left:0; bottom:0; } ul { margin:0; padding:0; counter-reset:li; } ul li { list-style:none; border-bottom:1px solid #222; height:52px; color:#666; position:relative; overflow:hidden; } ul li:hover { color:#fff; cursor:pointer; } ul li span { display:block; padding:15px; position:absolute; top:0; left:0; right:0; bottom:0; } ul li span:first-child:before { content:"Prakash."counter(li)""; counter-increment:li; } ul li span:first-child { z-index:2; } ul li span:last-child { padding:0; display:block; background:#ff6600; z-index:1; position:absolute; top:0; left:-300px; bottom:0; width:300px; height:52px; } ul li:hover > span:last-child { left:0; }

Related: See More


Questions / Comments: