通过转换在悬停时将内容添加到锚链接

Question

我想知道如何在页面上悬停锚链接时显示图标。

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

我如何存档？

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。