将内容添加到转移时悬停的锚链接

我想知道我可以如何存档图标，将鼠标悬停在页面上的锚链接上。将内容添加到转移时悬停的锚链接

我开始写了一小段我认为可能会做我预期的行为，但它却留下了一个空白。当您将鼠标悬停在锚点上时，文本的大小应扩展（增大）。

我该如何归档？

a:after { 
 
    content:" "; 
 
    position: relative; 
 
    opacity: 0; 
 
    left: -20px; 
 
    -webkit-transition: all 250ms; 
 
    transition: all 250ms; 
 
} 
 
a:hover:after { 
 
    opacity: 1; 
 
    left: 0px; 
 
    -webkit-transition: all 250ms; 
 
    transition: all 250ms; 
 
}

<p>This is a <a href='http://stackoverflow.com'>Test</a>. And I would like to link you on <a href='http://stackoverflow.com'>Stackoverflow</a> if you have any questions.</p>

来源

2017-09-14 MrMAG

另一方面的问题..我的方法，从-20px淡入到0px，现在仍然有效或有更好的解决方案。我看到人们也会“放松”。 – MrMAG

你期望它做什么，将文本推到悬停旁边？ – ProEvilz

是的，先生，确切地说。文字通常不应该包含任何间隙（或图标），但是如果您将鼠标悬停在锚点上，则应在锚点旁边生成一个图标，并将文本推送到旁边。 – MrMAG

可以使用负margin-left: -20px;向后拉的差距，同时也没有悬停。然后，当用户将鼠标悬停在文本上时，可以使margin-left: 0;为图标添加空白。

a:after { 
 
    content:" "; 
 
    position: relative; 
 
    opacity: 0; 
 
    left: 0px; 
 
    margin-left:-20px; 
 
    -webkit-transition: all 250ms; 
 
    transition: all 250ms; 
 
} 
 
a:hover:after { 
 
    opacity: 1; 
 
    left: 0; 
 
    margin-left:0; 
 
    -webkit-transition: all 250ms; 
 
    transition: all 250ms; 
 
}

<p>This is a <a href='http://stackoverflow.com'>Test</a>. And I would like to link you on <a href='http://stackoverflow.com'>Stackoverflow</a> if you have any questions.</p>

编辑： OP - 如果使用-26px，这是发生了什么。句号/句号被推入t。这是因为所加的差距只有20px这么宽，所以你只需要减去20px。

来源

2017-09-14 15:59:53 ProEvilz

啊哈，很酷，这的确很有意义。所以'margin-left'是我寻找的技巧，谢谢先生。我在想有点相同的行为，并想知道为什么“左”没有工作。 – MrMAG

调整了'margin-left：-26px;'的答案，如果文字没有被徘徊，文本会变得更窄。 – MrMAG

你有20px的差距，通常不会在那里，所以我们只拿掉20px。现在它是26px，现在在'测试'文本里现在是完全相反的。通过使用-26px，如果您没有图标，那么您将获得的空间将比在那里多。现在有比正常空间更少的空间... – ProEvilz

将内容添加到转移时悬停的锚链接

回答

相关问题