IE11でボタンの ::after や ::before がうまく表示されない理由

下図のようにアクティブ時に吹き出し風にタブボタンの下にちょっとした三角をつけましたが、IE11でうまく表示されません。
三角は position: absolute; で配置をコントロールしています。

<ul class="tablist" role="tablist">
  <li class="tab"><button class="tab-button" role="tab">タブボタン</button></li>
  <li class="tab"><button class="tab-button" role="tab">タブボタン</button></li>
</ul>
<div></div>

.tablist {
  display: flex;
  justify-content: space-between;
}

.tab-button {
  background-color: #002bab;
  border: none;
  color: #fff;
  font-size: 18px;
  outline: none;
  padding: 16px;
  position: relative;
  width: 100%;
}

.tab-button::after {
  border-top: 15px solid #002bab;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  bottom: -15px;
  content: "";
  left: 50%;
  margin-left: -8px;
  position: absolute;
}

▼IE11で三角が表示されない例

直下に div をくっつけているので重ね順の問題かと思い z-index で設定しましたが、ダメでした。

button はIE11のデフォルトで overflow: hidden; だった

IE11で button の overflow が hidden になっていたため、 position で button の範囲外に置いた三角が隠されて見えていなかったのでした。
overflow: visible; を追記して解決できました。