对文本中的链接使用 a::after 但排除链接的图像答案

【问题标题】：Using a::after for links in text but exclude linked images对文本中的链接使用 a::after 但排除链接的图像
【发布时间】：2019-03-12 10:15:13
【问题描述】：

我正在使用

a::after {
  content: " »";
}

样式链接。它的工作原理：

<a href="#">Some linked Text</a>

遗憾的是，我现在在链接图像后得到一个“»”，这是我不想要的：

<a href="#"><img src="test.jpg"></a>

为了在链接的单词之后而不是在链接的图像之后获得“»”，我必须进行哪些更改？

【问题讨论】：

标签： css

【解决方案1】：

我不知道我是否理解你的问题，但是如果你只想要文本中的符号，你可以使用类来分隔它。

.text::after {
  content: " »";
}

<a href="#" class="text">Some linked Text</a> 
<br><br>

<a href="#" class="img"><img src="test.jpg"></a>

【讨论】：

【解决方案2】：

您可以尝试使用负边距隐藏图像下方的符号：

a::after {
  content: " »";
}
a img {
  margin-right:-13px;
  position:relative;
  vertical-align:top;
}

<ul>
  <li><a href="#">Some linked Text</a> </li>
  <li>
    <a href="#"><img src="https://picsum.photos/100/100?image=0"></a>
  </li>
</ul>

【讨论】：