Question

我的问题的目标是创建一个代码，在链接后添加文件类型（以便人们知道他们是否应该期待任何特殊文件）。现在有一些选项可以使用图像来做到这一点，但我真的不喜欢它，我宁愿让方括号之间的文件类型有不同的大小。我的方法是以下列方式使用：after pseudoclass

a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;    
}

但是，这给我带来了一个非常奇怪的问题。内容似乎是一个块，它是链接的一部分。因此，链接下划线在“[DOC]”下的链接后继续。

所以问题非常简单：有没有办法以另一种方式做到这一点，或者确保我可以分别控制链接下的“[DOC]”下的内容？

Answer 1

尝试添加display：inline-block;

a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
display: inline-block;
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;    
}

未在IE中测试，但我认为IE在属性选择器方面存在问题，并且：之后或两者都有。

Answer 2

我希望有人会俯冲并指出一种更清洁的方式，但这有效：

Live Demo

<强> HTML：

<a href="lol.doc"><span>lol</span></a>

<强> CSS：

a {
    text-decoration: none
}
a span {
    text-decoration: underline
}
a[href$='.doc']:after, a[href$='.rtf']:after {
    content: " [DOC]";
    font-family: Monospace;
    font-size: 60%;
    font-weight:bolder;
    color:red;
    position:relative;
    top: -0.8em;
}

Answer 3

全部：我可能会坚持使用图像，因为这似乎更加强大（在支持浏览器方面）。我天真的世界观，在这种情况下，纯文本应该比图像更容易错误;）。

链接后伪类文本修饰后的CSS

3 个答案: