CSS after pseudo class text decoration in link

Question

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?

asked before: http://stackoverflow.com/questions/1238881/text-decoration-and-the-after-pseudo-element-revisited see also doctype question: http://doctype.com/%E2%80%9Ctextdecoration%E2%80%9D-%E2%80%9Cafter%E2%80%9D-pseudoelement — roryf, Feb 23 '11 at 12:40

score 4 · Answer 1 · answered Feb 23 '11 at 12:45

4

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.

answered Feb 23 '11 at 12:45

mark123

1,065
1
11
16

See: http://jsfiddle.net/fsEUE/1/ - it works in Chrome, Opera; but unfortunately not in Firefox, IE8, Safari. +1 anyway. – thirtydot Feb 23 '11 at 12:52
I use it with a background image instead of the content and it seems to work better: http://jsfiddle.net/imaginekitty/fsEUE/2/ – mark123 Feb 23 '11 at 13:02
Yup, that works in "every" browser. This is a good idea if the OP is happy to use an image instead. – thirtydot Feb 23 '11 at 13:05

score 3 · Answer 2 · answered Feb 23 '11 at 12:37

3

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

answered Feb 23 '11 at 12:37

thirtydot

224,678
48
389
349

@roryf: I'm glad that nobody seems to have found a cleaner fix in your linked questions. Then again, I wish there was a cleaner fix :) – thirtydot Feb 23 '11 at 12:43

score 1 · Answer 3 · answered Feb 23 '11 at 20:46

1

All: I will probably stick to an image since that seems to be a bit more robust (in terms of supporting browsers). My naive view of the world, that a plain text should always be easier than an image is wrong in this case ;).

answered Feb 23 '11 at 20:46

Hazkan

11
1

Even if you just make an image that says " [DOC]" at least you'll have foreknowledge of it's width so that you can add the correct padding and not have to worry about if the end user resizes their browser text. – mark123 Feb 24 '11 at 00:11
1

Wait, are you the same person that asked the question? – mark123 Feb 24 '11 at 00:52
@mark123: It's the same person on another account. You can tell this by the fact that they have the same Gravatar, which means they have the same email address. – thirtydot Feb 24 '11 at 03:35
Whoops! The advantage of registering is that you always appear by the same name. I still have to get into the details of replying in the right layer and so on... Anyhow: thanks voor the hint! – HKoldor Feb 24 '11 at 08:26

CSS after pseudo class text decoration in link

3 Answers3