css 对文本中的链接使用：：after，但不包括链接的图像

0ve6wy6x 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(110)

Demo
我在用

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

来设计链接。它的工作原理是：

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

可悲的是，我现在得到一个”后链接的图像，我不希望的是：

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

我必须改变什么才能在链接的单词后得到“”，而不是在链接的图像后得到“”？

3条答案

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

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

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

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

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

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>

可以使用:has伪类

a:after {
    content: " »";
}
a:has(img):after {
    content: '';
}