如何在链接后放置“打开远程URL”图像

Question

我有一个背景图像来表示，当单击URL时，用户将离开该站点：{background-image:url('/static/image/open_new.svg')}

open_new.svg是24x24。

我的链接是使用<ol><li>格式化的。

我想将背景图像放在链接之后，而我的链接有可变的长度。

在悬停时，此CSS步骤在链接的末尾：

ol li.external a {background:no-repeat; background-position: left 100% center; }

ol li.external:hover a {background-image:url('/static/image/open_new.svg')}

此CSS打开<li>和链接之间的空间，并在打开的空间中公开悬停的背景图像：

ol li.external a {background:no-repeat; background-position: left 100% center; padding:30px; }

ol li.external:hover a {background-image:url('/static/image/open_new.svg')}

什么CSS将把background-image 几个px放在可变长度链接的右边？

Answer 1

将CSS :after与CSS :hover结合使用，在鼠标悬停时向元素添加图像。然后，您可以很容易地调整图像大小和左边框。请参见：

https://codepen.io/NikxDa/pen/XzMGNX