title: Making a css play button on video thumbnail
body: <p>I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: <code>►</code> | It will be like this: <a href="http://i47.tinypic.com/250qis9.png" rel="nofollow">http://i47.tinypic.com/250qis9.png</a></p>
  
  <p>Here is a <strong>demo</strong>: <a href="http://jsfiddle.net/vtPhZ/2/" rel="nofollow">http://jsfiddle.net/vtPhZ/2/</a></p>
  
  <p>The problem is that it won't recognize the <code>a:before</code> tags that I gave it to. What am I doing wrong?</p>
  
  <p>The HTML snippet which generates the list: </p>
  
  <pre><code>&lt;div id="youtubeThumbs"&gt;
  &lt;ul class="ytlist"&gt;
  &lt;li&gt;
  &lt;table cellspacing="3" cellpadding="3" border="0"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td valign="top" rowspan="2"&gt;
  &lt;a class="clip" style="cursor: pointer;"&gt;
  &lt;span&gt;
  &lt;img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg"&gt;
  &lt;em&gt;&lt;/em&gt;
  &lt;/span&gt;
  &lt;/a&gt;
  &lt;/td&gt;
  &lt;td valign="top"&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And the CSS I tried to use (without success):</p>
  
  <pre><code>.ytlist li &gt; a:before {
  content: "►";
  }
  </code></pre>
  
  <p>How can I make it work?</p>