CSS 在 Class 中的文本末尾放置一个图标图像

Question

我正在使用的网站在场外 link 上使用一个右上箭头的小图像图标作为对用户的指示 "this link goes away from this site"。当前图像图标位于 link 文本的左侧（开头）。我们想要做的是将它移到文本的末尾。这证明是困难的。我可以将图标移动到 class 容器的最右侧，link 文本位于其中，但不能移动到文本的末尾。最右边的容器看起来不太好看

css 来自外部承包商，我们现在正在维护它并制作 edits/changes。我同意 css，但这超出了我的能力范围。

示例：
现在是：

->foo
->foobarbizbaam

我想要什么：

foo->
foobarbizbaam->

看起来不太好：

foo           ->
foobarbizbaam ->

来自我们 app.css 文件的代码片段：

a.external, a.external-link {
   background-image: url(/assets/img/external-link.png);
   background-repeat: no-repeat;
   background-size: 0.6875rem; 
}

.sidebar > ul > li a {
   background-color: #fff; 
}

/* this one positions the icon                        */
/* currently this puts icon at left-side of link text */
.sidebar > ul > li a.external {
   background-position: 0.5rem 0.7rem; 
}

.sidebar > ul > li > a {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
   border-top: 1px solid #666;
   border-left: 1px solid #666;
   border-right: 1px solid #666; 
}

有什么方法可以做到吗？

谢谢

Answer 1

如果您对 html 感到满意，可以在 html 中的文本后面添加图片，而不是 css 中的背景。类似于：

<span>text here <img src="img.jpg"></span>

这应该将图像放在文本之后

Answer 2

您应该可以使用 CSS ::after (::after) 选择器直接在链接后添加图片。

假设 HTML 看起来像这样：

<a href="http://whosebug.com" class="external" target="_blank">Whosebug</a>

您应该能够通过使用以下 CSS 来完成您想要的：

a.external:after {
  content: url('http://placehold.it/16x16'); /* Replace with your image icon path although, preferably, you should use an icon font instead. */
  margin-left: 5px; /* Adjust margin as needed */
}

举个例子：https://jsfiddle.net/sbeliv01/zrkg6rbb/1/

CSS 在 Class 中的文本末尾放置一个图标图像

CSS Position an Icon Image at the End of Text in a Class

css

zurb-foundation