Hamburger menu space allocation confusion

HTML & CSS
#1

Benchmark Point

I am using the above as a benchmark to create a similar hamburger system for myself.

Point of confusion:

  1. How come when the hamburger menu is active and the vertical menu pops in the remaining entire HTML is shifted towards the right as if now the space width, total, available is divided, and the vertical menu that has arrived, which was translated -X direction earlier is not in absolute position but shares the width as if there is width allocation in normal position elements(Not fixed and absolute )

  2. Secondly, what is the purpose of the pseudo element set on .wrapper?

image
image1366×494 160 KB