Как подключить значок рядом со ссылкой с помощью конечных селекторов?

Question

Проблема, с которой я сталкиваюсь, заключается в том, что моя ссылка помещается над значком, так что значок находится в фоновом режиме, а не рядом с ним, как хотелось бы. Как бы вы написали это, чтобы значок был слева от ссылки?

HTML:

<p><a href="http://www.scholastic.com/thehungergames/media/hungergames-chapter1.pdf" title="Book Sample">Hunger Games, Chapter 1</a></p> 

CSS:

a[href $=".pdf"] { 
    background: url('image.png') no-repeat center left; 
    padding-left 25px; 
} 

Answer 1

Я обновил свой код, и это, кажется, работает нормально ..

SEE HERE

a[href$=".pdf"] { 
    background: url('http://cdn.cutestpaw.com/wp-content/uploads/2011/11/cute-cat-l.jpg') no-repeat center left; 
    padding-left: 25px; /* you forgot the colon here */ 
    background-size: auto 100%; /* make the background size 100% of the height of the anchor link */ 
}