html - 将内容添加到带有过渡的悬停 anchor 链接

Question

我想知道如何存档将鼠标悬停在页面上的 anchor 链接时出现的图标。

我开始了一个小片段，我认为它可以实现我预期的行为，但它却留下了一个空白。当您将鼠标悬停在 anchor 上时，文本的大小应该会扩展(增长)。

如何存档？

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>

Answer 1

您可以使用负值 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。