侧栏导航-鼠标hover特效代码

鼠标经过导航时，前面有一条杠 ——

代码如下：

<style>
.menu-box{position:fixed;left:0px;top:0px;width:300px;height:100vh;background-color:#000;opacity:0.9;overflow:hidden;}
.listbox{width:60%;margin:0 auto;margin-top:22%;display:flex;flex-direction:column;}
h3{color:#16cd97;line-height:50px;height:10px;text-decoration:none;}
font{color:#16cd97;font-size:14px;line-height:30px;opacity:0.6;text-decoration:none;padding-bottom:20%;}
.fl{text-decoration:none;position:relative;transition:all 0.2s ease-in-out;color:#16cd97;font-size:16px;line-height:40px;}
.fl:hover{color:#16cd97;padding-left:calc(2rem + 1rem);transition:all 0.6s ease-in-out;}	
.fl::before {content:"";height:0.5px;width:0;background-color:#16cd97;position:absolute;top:50%;left:0;transform:translateY(-50%);transition:all 0.6s ease-in-out;}
.fl:hover::before {width:2.5rem;}	
</style>	

<div class="menu-box">
	<div class="listbox">		
		<h3>知识库</h3>
		<font>Archive</font>
        <a class="fl" href="#box1">设计-design</a>
		<a class="fl" href="#box2">运营</a>
		<a class="fl" href="#box3">Excel_VBA</a>
		<a class="fl" href="#box4">Python</a>
		<a class="fl" href="#box5">JavaScript</a>	
		<a class="fl" href="#box6">HTML+CSS</a>	
		<a class="fl" href="#box6">音乐-music</a>	
		<a class="fl" href="#box6">随笔 • Note</a>
	</div>
</div>