链接中的CSS第一个字母选择器

我目前正在从这个被称为:first-letter的darn伪元素中获取头痛。这似乎很有帮助，但最终并不按照我预期的方式工作。链接中的CSS第一个字母选择器

这里的上的jsfiddle，我怎样努力，以及如何它应该看起来像一个例子：

FIDDLE是here

正如你所看到的，:first-letter什么都不做。我希望它覆盖正常的链接设置，也是:hover选择器。

什么可能会出错？任何其他的想法如何实现这个只能用CSS？

2012-11-30 user828591

在这里阅读可能是有用的http://reference.sitepoint.com/css/pseudoelement-firstletter它看起来没有你期望的那么深远。从我的测试中，我只能得到这个选择器与'p'标签一起工作，至少目前为止。 – Pebbl

你究竟想要什么 –

我还没有研究过，但测试那个小提琴说a）'''不算作字母，而b）'：首字母'在''标签上不起作用。我把它当作ap标签工作，在M之前隐藏一封信：http://jsfiddle.net/4DnKu/2/ – Andy

，你可以把它放在CSS

http://jsfiddle.net/4DnKu/4/

a.one:before { 
    content: "»"; 
    color:#0F0; 
    padding:0 5px 0 0; 
}

恕我直言，而不是把你的“»”在HTML的不应该是在HTML两种方式，因为它实际上是唯一装饰。

伪元素被所有主流浏览器的支持，只有一个，你会遇到一些问题是IE < 8.你可以使用CSS表达式作为一种解决方法（小心轻放！）：

a.one { 
    *zoom: expression((new Function('elem', '\ 
     if(elem.before)\ 
      return;\ 
     elem.innerHTML = "<span class=ie7-before>»</span>" + elem.innerHTML;\ 
     elem.before = true;\ 
     elem.style.zoom = "1";\ 
    '))(this)); 
} 

a.one > .ie7-before, 
a.one:before { 
    content: "»"; 
    color:#0F0; 
    padding:0 5px 0 0; 
}

这使用了不少黑客，所以我不会推荐使用它，除非你知道那里发生了什么。

来源

2012-11-30 12:02:50 dave

你说得对，我不喜欢在HTML中编写箭头的方式，用CSS生成它将是最好的方法。你的解决方案几乎是完美的 - 几乎......在我的情况下，也需要箭头没有下划线了。你认为这是可能的吗？ – user828591

是的：http://jsfiddle.net/4DnKu/5/ – dave

所以基本上你添加了内联块（以及一些新的定位余量），这真棒，我从来没有发现这一点。谢谢！！ – user828591

链接中的CSS第一个字母选择器

回答

相关问题