Expanded background with CSS on Hover item

Question

i'm writing on my website and i've some problems with the following code (full code on codepen):

<section class="sidebar">
    <ul class="sidebar-menu clearfix">
      <li class="sidebar-menu-item">HOME</li>
      <li class="sidebar-menu-item">PORTFOLIO</li>
      <li class="sidebar-menu-item">BLOG</li>
      <li class="sidebar-menu-item">ABOUT ME</li>
      <li class="sidebar-menu-item">CONTACT</li>
    </ul>
</section>

https://codepen.io/anon/pen/pdErVq

As you can see all the :after elements are aligned in the first row.

How can i expand the elements in the proper <li> tags?

Answer 1

Your li's need position: relative.