标签: pseudo-element

无论如何要对伪进行旋转工作

content:"\24B6"? 

我正在尝试旋转unicode符号.

我正在使用内联CSS(即style属性中的CSS )制作HTML电子邮件签名,我很好奇是否可以使用:before和:after伪元素.

如果是这样,我将如何用内联CSS实现这样的东西？

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

CSS 2.1 :after和CSS 3 ::after伪选择器之间是否存在任何功能差异(::after旧浏览器不支持)？是否有任何实际理由使用新规范？

我试图用一个:before伪元素与img元素.

考虑这个HTML和CSS ......

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle.

这不会产生预期的效果(在Chrome 13和Firefox 6中测试).但是,它适用于a div或span元素.

为什么不？

有没有办法让伪元素与img元素一起使用？

由于IE7和IE8不支持伪元素的双冒号表示法(例如::after或者::first-letter),并且由于现代浏览器支持单冒号符号(例如:after)以实现向后兼容性,因此我应该仅使用单冒号表示法吗？ IE8的市场份额下降到可以忽略不计的水平回到我的代码库中找到/替换？或者我应该包括两者:

.foo:after,
.foo::after { /*styles*/ }

如果我关心IE8用户(可怜的亲戚),单独使用双重似乎很愚蠢.

我有一个Modal绝对定位的CSS类,z-indexed在它的父级之上,并且很好地定位于JQuery.我想在模式框的顶部添加插入符号图像(^),并且正在使用:beforeCSS伪选择器来干净地执行此操作.

图像需要绝对定位并在模态上方进行z索引,但我没有找到任何方法将相应的类添加到content属性中的图像:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

第二个最佳选择 - 我可以在内容属性中添加内联样式吗？

是否有可能:before为同一元素有多个伪？

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

我试图使用jQuery将上述样式应用于同一元素,但只应用最新的样式,而不是两者都应用.

我无法理解CSS :after属性的行为.根据规范(这里和这里):

正如其名称所示,:before和:after伪元素指定元素文档树内容之前和之后的内容位置.

这似乎没有限制哪些元素可以具有:after(或:before)属性.但是,它似乎只适用于特定的元素 ...... <p>有效,<img>无,有<input>,无效<table>.我可以测试更多,但重点是.请注意,这似乎在浏览器中非常一致.是什么决定一个物体是否可以接受一个:before和:after财产？

我有一组使用:before箭头的样式链接.

它在所有浏览器中看起来都不错,但是当我将下划线应用于链接时,我不希望在该:before部分(箭头)上加下划线.

请参阅jsfiddle例如:http://jsfiddle.net/r42e5/1/

可以删除吗？我坐的测试风格#test p a:hover:before确实适用(根据Firebug),但下划线仍然存在.

有什么办法可以避免这个吗

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "? ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

我想知道为什么浏览器只为第一个元素显示双开引号.第二个元素改为使用单引号.

a::before {
  content: open-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>