extra space from ::before/::after with inline-block

Question

<div class="test">Bla Bla</div>

.test {    
  margin: 1em;
  border: 1px solid black;
}

.test::before,
.test::after {
  content: "";
  background-color: green;
  height: 1em;
  width: 100%;
  display: inline-block;
}

There is an extra-space under the pseudo-elements. Whereas

.test {    
  margin: 1em;
  border: 1px solid black;
}

.test::before,
.test::after {
  content: "";
  background-color: green;
  height: 1em;
  display: block;
}

there is none. I know display:block makes more sense than display:inline-block; width: 100%;. I'd just like to know where that space comes from.