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

发布于 2024-10-19 08:19:59 字数 462 浏览 6 评论 0原文

我的问题的目标是创建一个在链接后添加文件类型的代码（以便人们知道他们是否应该期待任何特殊文件）。现在可以选择使用图像来执行此操作，但我不太喜欢它，并且我更喜欢将文件类型放在不同大小的方括号之间。我的方法是按以下方式使用 :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]”下的内容与链接下的内容分开？

原文

The goal of my question is to create a code which adds the filetype after a link (so that people know whether they should expect any special files). Now there are options to do this using an image, but I don't really like it and I would prefer to have the file type between square brackets in a different size. My approach is to use the :after pseudoclass in the following way

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;    
}

However, this gets me a very strange problem. The content seems to be in a block which is part of the link. Therefore the link underlining continues after the link under the "[DOC]".

So the question is pretty straightforward: Is there a way to either do this in another way or to make sure that I can control what is under the "[DOC]" separately from what is under the link?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望笑 2024-10-26 08:19:59

尝试添加 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 或两者上都有问题。

Try adding 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;    
}

not tested in IE but I think IE has trouble with attribute selectors and :after or both.

回复收藏 0 原文

寄意 2024-10-26 08:19:59

我希望有人能指出一种更干净的方法，但这可行：

现场演示

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;
}

I hope someone will swoop down and point out a cleaner way, but this works:

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;
}

回复收藏 0 原文