为什么@extend placholder仅适用于特定元素

Question

在scss中，我有以下代码：

%cursor--pointer {
   cursor: pointer;
}

.drawer {
   &__item {
      @extend %cursor--pointer;
   }
}

应输出：

.drawer__item {
   cursor: pointer;
}

在HTML中，我具有以下标记：

<a href="./" class="drawer__item"><span class="drawer__item__content">Home</span></a>

<div class="drawer__item"><span class="drawer__item__content">test</span></div>

现在，我希望将鼠标悬停时都显示指针，而div则不显示指针。在开发工具中查看时，cursor:pointer并不存在。

div：

a：

样式在那里。只是没有得到应用：

样式标签显示以下内容。在“样式”标签中，找不到上一张图片的线条。

所以我的问题是，为什么光标设置在a标记上而不设置在div上？ 完整的代码可以在here中找到。