Создание кнопки воспроизведения CSS на видео миниатюра

Question

У меня есть сайт, который генерирует видео по теме. У меня есть 4 миниатюры, и я хочу добавить кнопку css play на миниатюры, что можно сделать с помощью этого кода: ► | Это будет так: http://i47.tinypic.com/250qis9.png

Вот демо: http://jsfiddle.net/vtPhZ/2/

Проблема в том, что он не распознает a:before теги, которые я дал это. Что я делаю неправильно?

Фрагмент HTML, который генерирует список:

<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>

И CSS, который я пытался использовать (без успеха):

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

Как я могу заставить это работать?

Answer 1

Я не могу объяснить, почему, но по какой-то причине ваша смена методов объявления дочернего элемента вызывает проблему. Используя мои первые две рекомендации использования юникодной сущности для контента и использования псевдоэлемента, а не псевдокласса, CSS должен работать. Однако изначально это не сработало. Когда я удалил > с первой строки работал CSS.

Вот демоверсия: http://jsfiddle.net/vtPhZ/4/

Ваш метод был странным, но тот факт, что он не работал, был еще более странным...