我有以下HTML:
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>:before pseudo-class and images</title> <style type="text/css" media="screen"> img { display: block; width: 640pt; } img:before { content: "Test"; } </style> </head> <body> <img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" /> </body> </html>
:之前不会出现图像,但它适用于任何div.
为什么?
更新:
我在W3C中找到了这个解释:
Note. 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.
更新2:
我忘了提 – 我需要用CSS可视化图像的“alt”属性.
img:before { display: block; content: attr(alt); background-color: #333; /* etc. */ }