Demo我在用
a::after { content: " »"; }
来设计链接。它的工作原理是:
<a href="#">Some linked Text</a>
可悲的是,我现在得到一个”后链接的图像,我不希望的是:
<a href="#"><img src="test.jpg"></a>
我必须改变什么才能在链接的单词后得到“”,而不是在链接的图像后得到“”?
nwwlzxa71#
我不知道我是否理解你的问题,但是如果你只想在文本中使用符号,你可以使用类来分隔它。
.text::after { content: " »"; }
<a href="#" class="text">Some linked Text</a> <br><br> <a href="#" class="img"><img src="test.jpg"></a>
cyej8jka2#
您可以尝试使用负边距隐藏图像下的符号:
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>
tcomlyy63#
可以使用:has伪类
:has
a:after { content: " »"; } a:has(img):after { content: ''; }
3条答案
按热度按时间nwwlzxa71#
我不知道我是否理解你的问题,但是如果你只想在文本中使用符号,你可以使用类来分隔它。
cyej8jka2#
您可以尝试使用负边距隐藏图像下的符号:
tcomlyy63#
可以使用
:has
伪类