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

Question

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

ale*_*lex 115 css pseudo-element css-content

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

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

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

img:before {
  content: "hello";
}

Run Code Online (Sandbox Code Playgroud)

jsFiddle.

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

为什么不？

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

Answer 1

ale*_*lex 123

规范说 ......

注意.本规范不完全定义的相互作用:before和:after与替换元素(如IMG在HTML).这将在未来的规范中更详细地定义.

我想这意味着他们不使用img元素(现在).

另见这个答案.

这是未来,仍然没有规格...... (48认同)
2017年在这里,一样. (19认同)
近10年后，我们中的许多人已经白发苍苍，有些人已经去世了。我们有自动驾驶汽车，但图像上的伪元素是我们无法理解的技术之一。 (19认同)
真正的SOer应该在回答自己后3分钟问一个问题,+1 ;-) (15认同)
这是2019年，已经过去了8年。我们什么时候才能准确到达未来？ (10认同)
这是未来,仍然没有规格？ (7认同)
还在等待；在家工作时。因为新冠肺炎 (COVID-19)。 (6认同)
@kangax也许我们应该写它并将其提交给W3C. (5认同)
2017年中期,仍然没有规格...... (4认同)
2018年......还在数 (4认同)
遗憾的是，2020 年仍然不可能。我对 [Kellen 的评论]笑了很多（/sf/ask/517752861/ -elements#comment109669977_7396482) 不过。自动驾驶汽车比图像上的伪更容易……但很快特斯拉就会发现他们的车里有浏览器，而且不支持img上的伪，马斯克会心脏病发作，宇宙也会终于崩溃了。我希望他们能在图像上发明伪图像。安息吧马斯克 (4认同)
差不多2018年,仍然没有规格. (3认同)
*Le叹*仍在2018年等待...... BibleThump (3认同)
整整10年过去了。我们现在拥有可折叠屏手机、OLED 便携式游戏机和持枪机器人。img::after 伪元素已经成为前端傻瓜的差事。 (3认同)
2023年，十多年过去了，我却来到了这里 (3认同)
*这将在未来的规范*中更详细地定义.**咳咳**"PUNT!" (2认同)
再次!未来!这是怎么回事？ (2认同)
2016年还在等待!!! (2认同)
未来是否存在？ (2认同)
未来还不存在 (2认同)
2021年，我们和不死族一起继续等待。（去年电晕来了） (2认同)

Answer 2

Fer*_*men 6

只是为了测试并且知道它不漂亮,你可以做以下事情来使伪元素与'img'元素一起使用.

添加:display: block; content: ""; height: (height of image)px 到CSS中的img元素.

虽然它会使你的img标签成为空的原因content: ""然后你可以

style="background-image: url(image.jpg)" 在html中添加:到你的img元素.

在Fx,Chrome和Safari中进行了测试

Answer 3

Joe*_*ier 5

可能是浏览器供应商没有在img标签上实现伪元素,因为它们对规范的解释:img严格来说,元素不是块级元素或内联元素,它是一个空元素.

这似乎是正确的,尽管从HTML3链接(!)开始,术语已经发生了变化.在HTML5中,img就是所谓的"void"元素.空元素的示例包括hr,输入和源.请参阅:http://dev.w3.org/html5/markup/syntax.html#void-element //一些非正式测试表明您不能将伪元素添加到输入元素. (5认同)

归档时间：	14 年，1 月前
查看次数：	76144 次
最近记录：	11 年，11 月前