Comments on: Progressive enhancement of links using the CSS attribute selector

By: Ted

Ted — Fri, 12 Sep 2008 12:50:16 +0000

@slob: First off, for accessibility reasons, you must advise your users the link is to a file and is not a normal hyperlink. This is best done by putting the file type in the html. The approach listed is only visual and the text will not appear in the DOM for the screen readers.

So, the text is purely a decorative way of telling someone the file type. However, you could use this technique for other links, such as external links, popup links, form elements, etc.

Now, to get rid of it:

This is generating the text “:after{content…}It tells the browser to insert content after the link and style it accordingly. If you want to change the link but not add text, use this as your selector:
a[href$=".mp3"] {}
and don’t use the :after{} rule.

By: Slob Jones

Slob Jones — Fri, 12 Sep 2008 06:26:18 +0000

I really don’t see the need for the explanatory text (.mp3 file) to be included in the link, and thought I’d be able to remove it by adding text-decoration:none;

Example:
a[href$=".mp3"]:after{content: “(.mp3 file)”; color:#999; margin-left:5px; text-decoration:none;}

However, my edit didn’t work. Any reason why? Is there another way I can prevent the link from including that text?

Thanks.

By: Ted

Ted — Thu, 12 Jun 2008 20:45:56 +0000

That sounds like a firefox extension. I vaguely remember having that at one time. I did a quick search of the firefox add-ons section and couldn’t find it.

By: Dave

Dave — Thu, 12 Jun 2008 15:07:30 +0000

I’m not sure how useful this technique is: for me FireFox displays a little icon when I hover over any link, indication what type it is - maybe this is just an extension?