是否在不影响文本或页面外观的情况下放大文本链接热点？
是否在不影响文本或页面外观的情况下放大文本链接热点？
提问于 2018-06-09 22:57:52
我不想要任何背景颜色或边框--只想放大不可见的链接区域，链接的上方、下方、右侧和左侧。
尝试更改填充、边框和边距，但它们要么改变文本外观(例如在链接周围创建额外的空格，这是我不想要的)，要么干脆不影响热点大小。
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 sdlkCSS
span{
color:blue; /* TO MAKE IT LOOK LIKE A LINK */
}
a{
position:fixed;
/* color:transparent; /* UNCOMMENT WHEN SOLVED */
padding:20px;
}注意，我将链接文本banana 重复了两次，一次是针对隐藏的链接标记，另一次是针对可见文本。我重复文本的原因是为了确保不可见的链接标记与可见文本的大小相同。对于这个问题，以这种方式重复文本是可以接受的。但是，可能甚至不是必需的，这取决于如何做到这一点。(如果可能，最好不要重复文本)。
正如您所看到的，链接css上的“填充”是错误的--生成的链接与标记相差甚远：
但这证明我们可以在不影响页面渲染的情况下，将链接区域放在原始文本之外(或比原始文本更大)的位置。固定的定位似乎很重要，但也许不同的定位会更好。此外，也许a和span标记需要嵌套，而不是顺序。
链接区可以是透明的，一旦CSS制定出来，这样用户只看到“假”的链接。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 02:51:08
您甚至不需要<span>元素来完成此操作。使用伪元素将为您完成这项工作。让我们保留您的原始链接标记：
something <a href="#">banana</a> something...then我们可以通过将伪元素绝对定位在其父元素中来轻松地解决这个问题：
a {
position: relative;
color: blue;
}
a::before {
display: block;
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
content: '';
}请参阅下面的概念验证示例。该示例向伪元素添加了一个边框，以帮助您可视化它的布局。删除该属性以实现透明性。
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
另外，您可能希望使用@media print媒体查询在打印时使用display: none隐藏伪元素：
@media print {
a::before {
display: none;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50775559
复制相关文章
相似问题