css: Как сделать наложение фона на inline?

Всем привет, итак, у меня есть кнопка с фоновым цветом, и при наведении ее заполняет оверлей с другим фоном, но с z-index недопонимание какое-то:

По умолчанию z-index у всех равен 0, значит, при наведении на relative-кнопку, абсолютно спозиционированный в ней псевдоэлемент перекрывает ее собой, так как в коде он идет ниже. Если я задаю псевдоэлементу z-index -1, он уходит за родителя-кнопку и его не видно, ведь у кнопки z-index не задан, но по умолчанию он равен 0, что больше -1.

Потом я явно задаю кнопке z-index: 0 и внезапно оверлей начинает заполнять background-фон кнопки при наведении, а сама подпись на кнопке - видна.

Собственно мне непонятно:

1. Если z-index равен 0 по умолчанию, почему что-то меняется, если задать его в 0 явно?
2. Как оверлей проталкивает своей фоновый цвет к кнопке, но не трогает подпись, если его z-index равен -1, а у кнопки он равен 0 (хотя 1/2/etc у нее оказывают тот же эффект)?

https://jsfiddle.net/Solow/pv9x8zeq/5/

.btn {
  position: relative;
  border: 0;
  padding: 15px 20px;
  background-color: lightgrey;
  cursor: pointer;
  color: white;
  z-index: 0;

  &:hover::before {
    width: 100%;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: dimgrey;
    transition: .5s;
  }
}