: before the pseudo-class does not work with images
I have the following 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> : before will not be displayed for the image, but it is suitable for any div.
Why?
Update: I found this explanation in the 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 future specifications.
Update 2:
I forgot to mention - I need to render the "alt" attribute of the image using CSS.
img:before { display: block; content: attr(alt); background-color: #333; /* etc. */ } Given the spec you specified, I assume that this is the case when you have to wrap the image in an element and apply :before .
EDIT:
Given that the alt attribute is for alternative text and should basically provide the same information as the image, does this mean that you are duplicating the information for the user?
What about placing the information you want to display in the title attribute of the surrounding element and displaying it?
Example:
<style type="text/css" media="screen"> .image:before { content: attr(title); } .image img { display: block; width: 640pt; } </style> <div class="image" title="Information here"><img ... ></div>