I am trying to add an "external link image" to a-links with a target attribute. I have taken the image Wikipedia uses (http://bits.wikimedia.org/static-1.24wmf5/skins/vector/images/external-link-ltr-icon.svg) and converted it to base64 with http://webcodertools.com/imagetobase64converter. I want to add it as a background image to 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==);
}
The image seems somehow to be there. Chrome inspector seems to know about it, but nothing is shown however. Why is the image not shown? Or rather, what is the minimum CSS I need to add to make the image display?
Here is a fiddle: http://jsfiddle.net/lborgman/8CTWa/
The pseudo element has no dimensions: http://jsfiddle.net/8CTWa/3/
a[target]:after {
background-image: url(...);
content: "";
display: inline-block; /* so we can give dimensions */
height: 50px;
width: 50px;
}
You can also insert the image within content: http://jsfiddle.net/8CTWa/4/
a[target]:after {
content: url("...");
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments