链接中伪类文本装饰后的CSS [重复]

Question

我的问题的目标是创建一个在链接后添加文件类型的代码（以便人们知道他们是否应该期待任何特殊文件）。现在有一些选项可以使用图像来执行此操作，但我不太喜欢它，我希望方括号之间的文件类型具有不同的大小。我的方法是通过以下方式使用 :after 伪类

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 与属性选择器和 :after 或两者都有问题。

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

全部：我可能会坚持使用图像，因为它似乎更健壮（在支持浏览器方面）。我对世界的幼稚看法，在这种情况下，纯文本总是比图像更容易是错误的；）。