Question

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

问题在于它无法识别我提供给它的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/

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

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

1 个答案: