Pseudo-Element after image?

Page 1 of 1

6 Replies - 1169 Views - Last Post: 27 February 2012 - 09:33 AM

#1 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Pseudo-Element after image?

Posted 27 February 2012 - 08:31 AM

Hi, I am trying a very simple code where some CSS generated content should follow an image. The place where I am checking it out is http://www.w3schools...el_before_style and the code is

<html>
<head>
<title>Speech Bubble</title>
<style>
img { height: 63; width: 63; }
img:after {
content: "cool";
display: block;
}
</style>
</head>
<body>
<img title = "yep" src = "http://upload.wikimedia.org/wikipedia/en/e/e0/Kane_at_Raw_House_Show_2011.png" />
</body>
</html>


But no content is appearing. Can someone tell me what might be the issue?

This post has been edited by cupidvogel: 27 February 2012 - 08:38 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Pseudo-Element after image?

#2 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 806
  • View blog
  • Posts: 1,139
  • Joined: 24-August 11

Re: Pseudo-Element after image?

Posted 27 February 2012 - 08:47 AM

The image is showing up fine for me, both at the w3schools site and on my local machine.

EDIT: Apparently I should read posts more carefully. That's weird, I don't know if img:after isn't supported, but when I wrapped the image in <p> tags and used p:after, it worked.

This post has been edited by h4nnib4l: 27 February 2012 - 08:54 AM

Was This Post Helpful? 0
  • +
  • -

#3 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Pseudo-Element after image?

Posted 27 February 2012 - 08:50 AM

No no, I have no problem with the image, it's the content with the text cool that should be appearing after the image that is not appearing here. Can you explain that?
Was This Post Helpful? 0
  • +
  • -

#4 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Pseudo-Element after image?

Posted 27 February 2012 - 09:03 AM

I don't think :after/:before on image tags was ever implemented in the CSS2 spec.

http://www.w3.org/TR...1/generate.html
Was This Post Helpful? 1
  • +
  • -

#5 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 806
  • View blog
  • Posts: 1,139
  • Joined: 24-August 11

Re: Pseudo-Element after image?

Posted 27 February 2012 - 09:09 AM

Yeah, I edited my post because I apparently skimmed your question a little too quickly. Sorry, didn't make coffee before work and our coffee maker here is broken... :2guns:

I've been researching it a little, and it looks like support for img:after the way you're using it is very limited. It seems it's mostly (at least in the examples I found) used for displaying the alt text after an image if it doesn't load.
Was This Post Helpful? 1
  • +
  • -

#6 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Pseudo-Element after image?

Posted 27 February 2012 - 09:14 AM

Strange, I was reading a book Advanced CSS in the Friends of Ed series, and there the author has given a great number of examples about placing contents before and after images, plus he has also provided the resulting pages as images. How can he be so wrong?
Was This Post Helpful? 0
  • +
  • -

#7 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 806
  • View blog
  • Posts: 1,139
  • Joined: 24-August 11

Re: Pseudo-Element after image?

Posted 27 February 2012 - 09:33 AM

Was he specifically using :before and :after with <img>'s? I saw in a few places that it seems to work in a few browsers (like Opera, but I don't have Opera to test that claim), but everything I've found (and tested) seems to show that it disappeared circa css2/2.1 (along with its conspicuous absence in the standard that revolutionx linked to.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1