asp:HyperLink and pseudo elements

Question

Hello friends, I try to make menu and use pseudo elements for icons. And can't correct position it. Icons can have different shapes and how to align them in the center, also  the links have the same indentation. Please help me to understand how to make it. Maybe I should contain it in div?

 

<ul>

<li>

<asp:HyperLink id="hl1" runat="server" NavigateUrl="..." >Home</asp:HyperLink></li>

<li>

<asp:HyperLink id="hl2" runat="server" NavigateUrl="...">About us</asp:HyperLink></li>

<li>

<asp:HyperLink id="hl3" runat="server">Reports</asp:HyperLink></li>

</ul>

 

css:

#hl1:before {

....

}