当前位置: 首页 > 面试题库 >

为什么:before和:after伪元素不能与`img`元素一起使用?

燕璞
2023-03-14
问题内容

我正在尝试将:before伪元素与元素一起使用img

考虑一下HTML和CSS …

HTML

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

CSS

img:before {
  content: "hello";
}

这不会产生预期的效果(已在Chrome 13和Firefox 6中测试)。但是,它可以使用divspan元素。

为什么不?

有没有一种方法可以使伪元素与img元素一起使用?


问题答案:

规范说 …

注意。该规范并未完全定义替换元素(例如HTML中的IMG):before以及:after与替换元素的交互。这将在以后的规范中更详细地定义。

我猜这意味着它们暂时不使用img元素。



 类似资料:
  • 问题内容: 我正在尝试为HTML5中的提出一些好的默认样式,并尝试了以下方法: las,内容从不显示。对于伪元素,双冒号和单冒号都不是问题。我都尝试过。拥有一个伪元素和一个伪类也不是问题。我已经尝试过不使用和了。在Chrome,Safari和Firefox中,我得到了相同的行为(Firefox没有和类,但是我尝试了不使用它们。) 在伪元素工作细,,,和元素-其中一些是块元件和一些是内联。 因此,我

  • 问题内容: 在以下情况下,为什么:after选择器需要content属性才能起作用? 请注意,直到您指定content属性,您才看不到伪元素: 为什么这是预期的功能?您可能会认为显示块将迫使该元素显示出来。奇怪的是,您实际上可以在Web调试器中看到样式。但是,它们不会显示在页面上。 问题答案: 以下是各种W3C规范和草案的参考: 选择器级别3 伪元素’:before’和’:after’可用于在元素

  • 问题内容: 我正在显示链接的属性。title属性通过… 附加到链接。 现在,我想知道如何在移入和移出时动画化伪元素的不透明度。 html CSS 任何想法为什么这不起作用? 问题答案: WebKit(Chrome,Safari)不支持在伪元素上进行过渡。 它应该可以在Firefox中使用。 编辑: WebKit中的问题现在已解决。该修补程序已经可以在Chrome Carnery中找到,因此它将从版

  • 问题内容: 在此MS兼容性表上,它说IE9不支持伪元素和,但是当我尝试时,它似乎支持伪元素… 难道我做错了什么?我认为并且将是隐藏IE9中内容的好工具,而实际上却不是。 问题答案: IE8和更高版本支持CSS2伪元素和(具有传统的单冒号表示法)。它们不是CSS3的新功能。 另一方面,双冒号表示法是CSS3的新功能。IE9 确实 支持and和CSS1伪元素and的新符号。然而,展望未来,没有新的伪元

  • 问题内容: 我正在使用和CSS伪元素,并且它在 IE8 和所有现代浏览器中都可以正常工作,但在 IE7中 却不能正常工作。在 IE7中 是否存在已知的解决方法? 问题答案: 我在项目中使用的是IE8.js(http://code.google.com/p/ie7-js/),我必须将其删除,因为它在10/15秒内阻止了IE7。 为了保留用:after和:before伪元素生成的内容,而没有IE8.j

  • 问题内容: 有没有办法使用jQuery 选择/处理CSS伪元素,例如和(以及带有分号的旧版本)? 例如,我的样式表具有以下规则: 如何使用jQuery将’foo’更改为’bar’? 问题答案: 您还可以将内容传递给具有data属性的伪元素,然后使用jQuery进行操作: 在HTML中: 在jQuery中: 在CSS中: 如果要防止显示“其他文本”,可以将其与seucolega的解决方案结合使用,如