html - 伪元素与 img 的奇怪行为

标签 html css

<分区>

试图在其下方制作有关图像的信息。但是有一个问题...伪元素不可见..

<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>

div {
    height: 100px;
    margin: 10px;
    background: yellow;
}
div[info]::after, img[info]::after {
    content: attr(info);
    display: block;
    margin: 3px;
    color: black;
    font-style: italic;
}

Jsfiddle DEMO

谢谢。

最佳答案

img 元素不能有伪元素,因为它们不能有子元素——::before 被插入到元素中。它看起来像这样:

<img><before></img>

或者至少 itt 没有被 spec 定义

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

关于html - 伪元素与 img 的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13553064/

上一篇:html - 用CSS居中div

下一篇:html - 如何摆脱外部表格边框

相关文章:

javascript - 获取元素的所有定义(在样式表/内联中)css 样式

html - 为什么表格的内部元素的宽度不固定,即使它给定了一个固定的数字?

php - 如何使用 PHP 搜索和替换匹配的文本(除非在 HTML 标记中找到)?

javascript - 如何使图像围绕圆圈透明

java - 框/表内的输入框

html - 确保图像被缩小

css - Netbeans 将 css 变量显示为错误

javascript - 一旦最后一个 li 在屏幕上可见,就停止滚动

html - 放大网页时,文本大小与其他内容大小发生变化

css - 我们今天可以忽略小于 960 像素的宽度吗?