css - 在视频缩略图上制作一个CSS播放按钮

Question

我有一个网站可以生成与某个主题相关的视频。我有 4 个缩略图，我想在缩略图上添加一个 css 播放按钮，可以使用以下代码完成:► |它将是这样的: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

我无法解释原因，但出于某种原因，您对声明子元素的方法的更改导致了问题。使用我对内容使用 unicode 实体和使用伪元素而不是伪类的前两个建议，CSS 应该可以工作。然而，它最初并没有奏效。当我从第一行中删除 > 时，CSS 起作用了。

这是一个演示:http://jsfiddle.net/vtPhZ/4/

你的方法很奇怪，但它不起作用更奇怪......