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



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

最佳答案

您可以使用绝对定位的伪元素来增加链接所在的空间。
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;
}


此技术对于子菜单太靠近边缘而太容易关闭的菜单很有用。

关于css - 扩展 anchor 的可点击区域,而不会影响CSS的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23206776/

10-12 13:02
查看更多