Create css play button on video thumbnail

Question

I have a website that creates a related video with a theme. I have 4 thumbnails and I want to add a css play button on the thumbnails that can be done with this code: ► | This will be as follows: http://i47.tinypic.com/250qis9.png

Here is a demo : http://jsfiddle.net/vtPhZ/2/

The problem is that it does not recognize the a:before tags that I gave it. What am I doing wrong?

HTML snippet that generates a list:

 <div id="youtubeThumbs"> <ul class="ytlist"> <li> <table cellspacing="3" cellpadding="3" border="0"> <tbody> <tr> <td valign="top" rowspan="2"> <a class="clip" style="cursor: pointer;"> <span> <img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg"> <em></em> </span> </a> </td> <td valign="top"> </tr> </tbody> </table> </li> 

And the CSS I tried to use (without success):

 .ytlist li > a:before { content: "►"; } 

How can I make it work?

Answer 1

I can’t explain why, but for some reason your changing methods to declare a child is causing a problem. Using my first two recommendations on using a unicode object for content and using a pseudo-element rather than a pseudo-class, CSS should work. However, it did not initially work. When I removed > from the first line, CSS worked.

Here is a demo: http://jsfiddle.net/vtPhZ/4/

Your method was weird, but the fact that it didn't work was even weirder ...