Question

我想让我的网站使用维基百科使用的外部链接图标。这是一个SVG，我相信使用CSS显示在链接的末尾。他们用于链接的行看起来很像

<a class="linkout" href="

如何编写CSS或JS（最好是CSS）来将图像添加到最后。通过维基百科源代码看，我还没弄清楚他们是如何做到的。

Answer 1

只需按照维基百科的说法：

http://jsfiddle.net/y89kx/

必须为某个类设置一些background css样式

HTML

<a class="external" href="someLink">External Link</a>

CSS

.external {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent, transparent), url(image URL);
    padding-right: 13px;
}

Answer 2

除了@ Adjit之外，另一种方法是使用CSS3后添加内容：

.linkout:after{
    height:16px;
    margin:0 0 0 5px;
    padding:0 0 0 20px; /* Width of your image */
    background-image:url(/path/to/your/file.png);
    content:" ";
}

看到这个JSFiddle http://jsfiddle.net/eECTc/

维基百科离开网站图像

2 个答案:

HTML

CSS