为什么不显示 :after 图像

Question

我正在尝试将“外部链接图像”添加到具有目标属性的链接。我拍摄了 Wikipedia 使用的图像 (http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg)，并使用 http://webcodertools.com/imagetobase64converter 将其转换为 base64。我想将它作为背景图片添加到 a[target]:after。

<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("...");
}