Probleme mit :before und :after

[bobby]

Moin,

irgendwie habe ich gerade ein Verständnisproblem

ich hab folgende Struktur im HTML

 <nav>
   <ul>
     <li>
       <a href="#">Unternehmen</a>
       <a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" /></a>
       <ul>
         <li>
           test
         </li>
       </ul>
     </li>
   </ul>
 </nav>

dazu folgendes Sass

header nav ul
  position: relative
  list-style-type: none
  top: 51px

  li
    list-style-image: none
    display: inline-block
    margin-left: 30px
    margin-right: 30px
    height: 60px

    &:hover > ul
      position: absolute
      top: 40px
      display: block
      margin: 0
      padding: 0

    & > a:first-child
      font-size: 14px
      font-weight: 700
      letter-spacing: 0.15em
      color: $black
      text-transform: uppercase
      
      &:hover
        text-decoration: none

        & + a:after
          content: ""
          position: relative
          //bottom: 4px
          display: block
          height: 2px
          width: 100%
          // margin: 10px
          //left: 0
          background: $black

    a.submenubutton:last-child
      display: none

    & > ul
      position: absolute
      left: 0
      width: 100%
      display: none
      background: rgb(0,0,0)
      color: white

      &:hover
        display: block
        
        &:before
          content: ""
          position: relative
          // bottom: 4px
          display: block
          height: 2px
          width: 100%
          //margin: 10px
          //left: 0
          background: $black
          

      li
        list-style-image: none
        display: inline-block
        margin-left: 30px
        margin-right: 30px

das Problem ist, das beim Content :after (& + a:after => header ul li a:first-child:hover + a:after ) der Content korrekt in den Grenzen des LI angezeigt wird (da ja position: relative)

aber beim :before (&.before => header nav ul li > ul:hover:before) wird der content nicht in den Grenzen des LI angezeigt, sondern geht darüber hinaus, obwohl auch position relative.

After und before wird GENAU an der gleichen stelle eingefügt.

wo liegt das Problem? was habe ich falsch verstanden?

Gruß Bobby