css - 使 [href$=".xyz"]包含时不显示

Answer 1

使用以下 CSS 规则：

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

在此处查看 JSFiddle：http: //jsfiddle.net/eh4jQ/4/

Answer 2

假设您只想在锚点之后附加文本，而不是子项：我认为没有办法根据子项更改父母的样式，因此您可以为具有图像的锚点添加一个类？

试试下面的 HTML：

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

以及以下 CSS：

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

这应该只将:after伪元素添加到锚点而不someClass