扩展锚点的可点击区域，而不影响CSS的位置

Question

在我最近创建的移动Web应用程序中，始终使用了许多锚标记。默认情况下，锚标签具有可单击的区域，该区域纯粹围绕文本。我希望尝试扩展这个区域，而不会影响锚标记的位置。

黑色边框显示当前可点击区域，红色边框显示我更喜欢的可点击区域。你想到的第一件事就是添加填充，但这会移动标记，这就是我要问的问题的全部原因。如何在不影响其位置的情况下展开应用程序中所有锚标签的可点击区域？

Answer 1

您可以使用绝对定位的伪元素来增加链接所在的空间。 basic DEMO：

a {
  display:inline-block;
  position:relative;
  border:solid;
}
a:before {
  content:'';
  position:absolute;
  top:-1em;
  left:-1em;
  right:-1em;
  bottom:-1em;
  border:solid red;
}

这种技术对于菜单来说太有用了，因为子菜单边缘太多了。