放大文本链接热点而不影响文本或页面外观？

Question

不想要任何背景颜色或边框 - 只想放大链接的上方，下方，右侧和左侧的不可见链接区域。

尝试更改填充，边框和边距，但它们要么更改文本外观，（例如在链接周围创建额外的空格，我不想要），或者只是不影响热点大小。

a {
  padding: 5px;
}

This solution更接近，但并不完全。我认为知识渊博的CSS编码器可以解决它。

HTML

flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj 
flkasj fdlkasjd flkj sd <a href="#">banana</a><span>banana</span> adfsddfa 
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk

CSS

span{
  color:blue;  /* TO MAKE IT LOOK LIKE A LINK */
}

a{
  position:fixed;
  /* color:transparent; /*  UNCOMMENT WHEN SOLVED */
  padding:20px;
}

请注意，我重复链接文本banana TWICE，一次用于隐藏链接标记，再次用于可见文本。我重复文本的原因是为了确保不可见的链接标记与可见文本的大小相同。以这种方式重复文本对于这个问题是可以接受的。但是，甚至可能不需要，具体取决于如何完成。 （如果可能的话，最好不要重复文本）。

正如您所看到的，链接css上的“填充”是错误的 - 生成的链接远离标记：

但是这证明我们可以在原始文本之外的某个位置放置一个链接区域，而不会影响页面呈现。固定定位似乎很重要，但也许不同的定位会更好。此外，也许a和span标签需要嵌套而不是顺序。

一旦CSS计算出来，链接区域就可以变得透明，这样用户只能看到“假”链接。

Answer 1

你甚至不需要<span>元素来做到这一点。使用伪元素将为您完成工作。让我们保持原始链接标记：

something <a href="#">banana</a> something

...然后我们可以通过将伪元素绝对定位在其父元素中来轻松解决此问题：

a {
  position: relative;
  color: blue;
}

a::before {
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  content: '';
}

请参阅下面的概念验证示例。该示例在pseudo元素中添加了一个边框，以帮助您可视化它的布局方式。删除属性以实现透明度。

a {
  position: relative;
  color: blue;
}

a::before {
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border: 1px solid #000;
  content: '';
}

flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj 
flkasj fdlkasjd flkj sd <a href="#">banana</a> adfsddfa 
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk

---

另外，您可能希望使用display: none媒体查询在打印时使用@media print隐藏伪元素：

@media print {
    a::before {
        display: none;
    }
}