如何扩展锚点元素的可点击半径来填充包含的div？

<div class="anchor-container">
  <a href="#" class="anchor">锚点</a>
  <div class="content">需要填充的内容</div>
</div>

.anchor-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.anchor {
  position: relative;
  z-index: 1;
}

.anchor::before {
  content: "";
  position: absolute;
  top: -10px; /* 负值表示向外扩展 */
  left: -10px; /* 负值表示向外扩展 */
  right: -10px; /* 负值表示向外扩展 */
  bottom: -10px; /* 负值表示向外扩展 */
}

.anchor::before {
  content: "";
  position: absolute;
  top: -10px; /* 负值表示向外扩展 */
  left: -10px; /* 负值表示向外扩展 */
  right: -10px; /* 负值表示向外扩展 */
  bottom: -10px; /* 负值表示向外扩展 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置背景色和透明度 */
  z-index: -1; /* 将伪元素置于锚点元素下方 */
}