title: CSS - Transform function not working on links?
body: <p>I did like so when a href's extension is .pdf; .doc; .ppt; .xls then it'll add corresponding file picture in front of it. Then I tried making a link go smaller when I hover over it but I doesn't do anything! Am I doing something wrong or what?</p>
  
  <p><a href="https://i.stack.imgur.com/JHLwB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JHLwB.png" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul{
    list-style-type: none;
  }
  ul a{
    text-decoration:none;
    padding-left: 20px;
    background-repeat: no-repeat;
  }
  ul a:hover{
    text-decoration:underline;
    color:#666;
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  a[href$=".pdf"]{
    background-image:url(http://i.stack.imgur.com/zJlYq.gif);
  }
  a[href$=".doc"]{
    background-image:url(http://i.stack.imgur.com/z2lbW.gif);
  }
  a[href$=".ppt"]{
    background-image:url(http://i.stack.imgur.com/Tk5Vv.gif);
  }
  a[href$=".xls"]{
    background-image:url(http://i.stack.imgur.com/sOr7E.gif);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="/one.pdf"&gt;pdf&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/two.doc"&gt;doc&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/three.ppt"&gt;ppt&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/four.xls"&gt;xls&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>