当<a>包含<img>时,不显示[href $ =".xyz"]

Question

我有很多超链接,如:

<a href="file.pdf">File</a>

并且我使用CSS在这些链接中的每一个之后加上单词PDF,如下所示:

a[href$=".pdf"]:after {
content: "(pdf)"; 
font-size: 10px; 
color: #666; 
padding-left: 5px; 
vertical-align: 6%;
}

这适用于文本超链接,但我不希望"(pdf)"显示超链接图像,例如:

<a href="file.pdf"><img src="" alt=""></a>

这里有什么建议？

Answer 1

使用以下css规则:

a[href$=".pdf"] :not(img):after {
   content: "(pdf)";
   font-size: 10px;
   color: #666;
   padding-left: 5px;
   vertical-align: 6%;
}