Dynamic Link Markers
In this example, we use an attribute selector, with the CSS-3 substring matching attribute selector designated by a dollar sign $ to select an element based upon what file extension is used at the end of the href attribute value.
...in plain english, CSS can style a link differently than others based upon what type of file the link is!
a[href$='.pdf']::after { content:' (PDF)'; }
a[href$='.doc']::after { content:' (MS Word)'; }
Whitespace is also honored. The output of this code would look something like this:
Also, you may notice that the (PDF) notation has an underline and is part of the link. This is not a bad thing, but it doesn’t look all that good. To fix it (and make sure its lined up nicely) you can additionally throw in a few extra properties.
a[href$='.pdf']::after {
padding:3px; display:inline; vertical-align:middle;
background-color: white; content:' (PDF)';
}
The output now looks like this:
link (PDF)
Personally I like to add a graphical image to it. See below.
a[href$='.pdf']::after {
padding:3px; display:inline; vertical-align:middle;
background-color:
white; content: url('/images/pdf.gif');
}
So now it should look like this:
Note:
Internet Explorer (even version 7) doesn't support CSS generated content, so we'll use literal text & literal images in this tutorial. But in all the code sample files we'll let CSS handle this on its own.
Related URLs:
Dec 27, 2006
Comments
If you use this on sites, Internet Explorer will support CSS3 functions like this...
http://dean.edwards.name/IE7/
Write a comment
* = required field