Question

我正在尝试向带有目标属性的链接添加“外部链接图像”。我已经使用维基百科使用的图像（http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg）并使用http://webcodertools.com/imagetobase64converter将其转换为base64。我想将它作为背景图像添加到[目标]：之后。

<a target="_blank" href="http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg">External link</a>

a[target]:after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODI2LjQyOSAtNjk4Ljc5MSkiPjxyZWN0IHdpZHRoPSI1Ljk4MiIgaGVpZ2h0PSI1Ljk4MiIgeD0iODI2LjkyOSIgeT0iNzAyLjMwOSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDZjIi8+PGc+PHBhdGggZD0iTTgzMS4xOTQgNjk4Ljc5MWg1LjIzNHY1LjM5MWwtMS41NzEgMS41NDUtMS4zMS0xLjMxLTIuNzI1IDIuNzI1LTIuNjg5LTIuNjg5IDIuODA4LTIuODA4LTEuMzExLTEuMzExeiIgZmlsbD0iIzA2ZiIvPjxwYXRoIGQ9Ik04MzUuNDI0IDY5OS43OTVsLjAyMiA0Ljg4NS0xLjgxNy0xLjgxNy0yLjg4MSAyLjg4MS0xLjIyOC0xLjIyOCAyLjg4MS0yLjg4MS0xLjg1MS0xLjg1MXoiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
}

图像似乎在某种程度上存在。 Chrome检查员似乎知道它，但是没有显示任何内容。为什么图像没有显示？或者更确切地说，为了使图像显示我需要添加的最小CSS是什么？

这是一个小提琴：http://jsfiddle.net/lborgman/8CTWa/

Answer 1

伪元素没有维度：http://jsfiddle.net/8CTWa/3/

a[target]:after {
    background-image: url(...);
    content: "";
    display: inline-block; /* so we can give dimensions */
    height: 50px;
    width: 50px;
}

您还可以在content：http://jsfiddle.net/8CTWa/4/

中插入图片

a[target]:after {
    content: url("...");
}

为什么不是：显示后的图像

1 个答案: