Question

我正在处理的网站使用非现场链接上的向上右箭头的小图像图标作为用户的指定“此链接远离此网站”。目前，图像图标位于链接文本的左侧（开头）。我们想要做的是将它移到文本的末尾。这证明是困难的。我可以将图标移动到链接文本所在的类容器的最右侧，但不能移动到文本的末尾。在容器的最右边看起来并不那么好。

css来自外部承包商，我们现在正在维护它并进行编辑/更改。我对css很好，但这超出了我的meeger chops。

例：
就像现在一样：

->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/

Answer 2

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

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

这应该将图像放在文本

之后

CSS在一个类的文本末尾定位一个图标图像

2 个答案: