Случайно наткнулся на этот прием в одном из шаблонов для cms joomla, может и вам пригодится так как он вполне универсален.
Частенько на наших сайтах встречаются ссылки на какие-либо файлы.
Чаще всего это бывают документы doc или pdf. Примерно с той же частотой мы задумываемся над тем, что было бы неплохо и даже логично рядом с cсылкой поместить иконку соответствующую типа файла (расширению).
Сделать это проще простого:
Например, для тех же .doc и .pdf — файлов инструкции в css будут выглядеть так:
a[href$=".pdf"] { padding: 0 0 0 20px; background: transparent url(/images/pdf.jpg) no-repeat left top; } a[href$=".doc"] { padding: 0 0 0 20px; background: transparent url(/images/doc.jpg) no-repeat left top; } |
Рекомендую использовать картинки иконок размером 16×16 px.
Причем заметьте что параметр задан как 'top', тем самым мы указываем старику ИЕ (InternetExplorer)
то что в случае многострочной ссылки ее бэкграунд следует ровнять по верхнему краю. Остальные бродилки сделают это автоматом.
Вероятно такая конструкция работает по принципу поиска в атрибуте href подстроки с расширением и, следовательно, можно много чего придумать полезного помимо иконок.
Это предположение подтверждает размещение штрихового подчеркивания под javascript-ссылками сделанное с помощью css-правила: a[href$="javascript:;"] {border-bottom:1px dashed;text-decoration:none !important;}
Спасибо, очень просто и быстро. Я уж думал мудрить с php.