css - 我的 css 伪内容无法正常工作

Question

我想将 html 文本替换为 fontawesome 图标。通常我做 :after 和 :before 但在这种情况下我的代码不起作用。不知道为什么。伙计们可以看出那里出了什么问题。下面是代码

html

<td><a class="em-calnav em-calnav-prev" href="?ajaxCalendar=1&amp;mo=6&amp;yr=2014&amp;limit=3" rel="nofollow">&lt;&lt;</a></td>

CSS

a.em-calnav.em-calnav-prev {display:none;}  
a.em-calnav.em-calnav-prev:after {content:'test'; 
  visibility: visible;
  display: block; } 

演示 http://jsfiddle.net/9x4Hg/

Answer 1

如果您使用 display:none 设置元素 - 这也适用于它的伪元素。

这就是您的代码无法正常工作的原因。

DEMO

编辑:

您可以在元素上使用 visibility:hidden 而不是 display:none

DEMO