在视频缩略图上制作一个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: "►";
}

我该怎么让它工作？

- user1717526

---

将内容更改为 "\25B6" 可能会更好。演示会有所帮助。同时使用 before 伪元素 a::before。 - henryaaron

感谢您的评论。这是一个演示：http://jsfiddle.net/vtPhZ/2/ - user1717526

Answer 1

我无法解释为什么，但出现问题的原因是您更改了声明子元素方法。使用我的前两个建议，即对内容使用unicode实体并使用伪元素而不是伪类，CSS应该可以工作。但最初它没有起作用。当我从第一行中删除>时，CSS就能够正常工作。

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

您的方法很奇怪，但事实上它没有起作用更加奇怪...

- henryaaron

---

OP编写的子选择器无法起作用，因为被选中的a标签不是li标签的直接子元素。 - Artur Kim

啊，那很有趣。我以为 > 与空格的功能是相同的 @ArturKim - henryaaron