在视频缩略图上制作CSS播放按钮

Question

我有一个网站，可以生成与某个主题相关的视频。我有 4 个缩略图，我想在缩略图上添加一个 css 播放按钮，这可以使用以下代码完成：\xe2\x96\xba| 它将是这样的： http: //i47.tinypic.com/250qis9.png

\n\n

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

\n\n

问题是它无法识别a:before我给它的标签。我究竟做错了什么？

\n\n

生成列表的 HTML 片段：

\n\n

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

\n\n

\n

\n\n

我尝试使用的CSS（没有成功）：

\n\n

.ytlist li > a:before {\ncontent: "\xe2\x96\xba";\n}\n

\n\n

我怎样才能让它发挥作用？

\n

Answer 1

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

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

你的方法很奇怪，但没用更奇怪……