On Fri, 12 Aug 2011 16:30:46 -0700, Angela French <afre...@sbctc.edu>
wrote:
>I'm trying to find a way to display a document file type icon after links to
>such documents. I am trying this code:
>
>a[href$='pdf']
>{
> background:
> url(http://168.156.9.250:8080/imgs/layout/icon_pdf.gif) no-repeat right;
> padding-left:20px;
>
>}
>
>The problem with this is that on a long link that wrap to the next link the
>icon doesn't appear right at the end of the link label, it appears to the
>right (the end of the blocked element).
>
>Does anyone know of a sure fire way to display icons after links with css?
I haven't actually tried it - no access to my web server or software at
the moment - but my first thought would be to use the :after
selector/pseudo-element, and specify the icon as content instead of
background:
a[href$='pdf']:after
{
content: url(http://168.156.9.250:8080/imgs/layout/icon_pdf.gif);
}
***NOTE: A very cursory google didn't tell me whether it should be
a:after[href$='pdf'] or the way I have it here. I don't have a lot of
confidence in my memory of what I think I've seen for combining
selectors this way.
--
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource
edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://come.to/freelancetraveller
http://freelancetraveller.downport.com/
®Traveller is a registered trademark of
Far Future Enterprises, 1977-2009. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.
Freelance Traveller extends its thanks to the following
enterprises for hosting services:
CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
