Стиль CSS для вложений - значки перед текстом автоматически - PullRequest
Новая
       12

Стиль CSS для вложений - значки перед текстом автоматически

0 голосов
/ 03 декабря 2011

Мне было интересно, насколько сложно создать класс для загрузок, в котором значок располагается прямо перед текстом, а текст и значок являются частью ссылки на вложенный файл.Есть ли простой способ сделать это с помощью CSS?

1 Ответ

1 голос
/ 03 декабря 2011

Предполагая, что все ссылки на загрузки являются a элементами, с именем класса 'downloadLink': 

.downloadLink {
    background-image: url(path/to/image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}

Если эти ссылки имеют формат: 

<a href="http://example.com/downloads/document.pdf">document.pdf</a>
<a href="http://example.com/downloads/image.png">image.png</a>

Тогда css: 

.downloadLink[href$=pdf] {
    background-image: url(path/to/pdf_background_image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}
.downloadLink[href$=png] {
    background-image: url(path/to/png_background_image.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}

Придаст особый фон ссылкам с атрибутом href, который заканчивается pdf или png. Этот подход основан на селекторах атрибутов CSS3, которые могут снизить кросс-браузерную совместимость, но, согласно таблице совместимости Quirksmode , а не в значительной степени (в основном все выше, включая IE7, должен поддерживать это (хотя и не указывает, какой из селекторов поддерживается) в IE или других браузерах).

Ссылки:

...