CSS 将图标图像定位在类中文本的末尾

Question

我正在使用的网站在站外链接上使用一个右上箭头的小图像图标作为对用户的指示“此链接离开此网站”。目前图像图标位于链接文本的左侧(开头)。我们想要做的是将它移到文本的末尾。这证明是困难的。我可以将图标移动到链接文本所在的类容器的最右侧，但不能移动到文本的末尾。最右边的容器看起来不太好。

CSS 来自外部承包商，我们现在正在维护它并进行编辑/更改。我对 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

您应该能够使用 CSS ::after ( ::after ) 选择器直接在链接后添加图像。

假设 HTML 看起来像这样:

<a href="http://stackoverflow.com" class="external" target="_blank">Stackoverflow</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/