html - 如何使用结束选择器在链接旁边附加一个图标？

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 */
}