Understand some wp theme css code

This is an extract from file style.css in WordPress theme Twenty sixteen. I have this part of code which creates a black strip on the top and bottom of the page.

body:not(.custom-background-image):before,
body:not(.custom-background-image):after {
    background: inherit;
    content: "";
    display: block;
    height: 21px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 99;
}

I affirm this cause I’ve understand that modifying the height to 0px I let the strips to disappear. But how do these instructions work to create the two strips ? I know it’s also a whole CSS work but I think those instructions make the great part of the job.

The preview of the theme is here :
https://wordpress.org/themes/twentysixteen/.

The whole style.css file is here :
https://github.com/WordPress/twentysixteen/blob/master/style.css#L18-L51

Who can help me to clear things?