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

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

这里是一个演示：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: "►"; 
}

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

来源

2012-10-03 user1717526

改变其内容为“\ 25B6”也许？演示会有所帮助。也可以使用before伪元素a :: before。 – henryaaron

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

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

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

你的方法很奇怪，但事实上，它没有工作是更奇怪...

来源

2012-10-03 19:27:02 henryaaron

哈哈，确实很有趣。感谢您的帮助，我真的很感激！ – user1717526

由OP编写的子选择器不起作用，因为被定位的'a'标签不是'li'标签的直接子元素。 –

啊，这很有趣。我确定'''和空间@ArturKim具有相同的功能 – henryaaron

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

回答

相关问题