images and before/after

I've never used the after pseudo selector so I thought I'd give it a spin.

It doesn't seem to work with img

img:after{
content: "something after";
}

<img ...>

Why is that? It works with other inline and block level elements.

I didn't see anything here on it:

http://www.w3.org/TR/CSS21/generate.html

BTW, what is the level of support?

Jeff

On 2009-03-17, Jeff <jeff_thies (AT) att (DOT) net> wrote:

I've never used the after pseudo selector so I thought I'd give it a spin.

It doesn't seem to work with img

img:after{
content: "something after";
}

img ...

Why is that? It works with other inline and block level elements.

An image is a replaced element. You're inserting text _inside_ it, sort
of as if you'd written:

<img>something after</img>

which of course you can't do. :after doesn't mean "after the element"
but "inside it, at the end".

I didn't see anything here on it:

http://www.w3.org/TR/CSS21/generate.html

BTW, what is the level of support?

Firefox, Opera and Konqueror all support it.

Ben C wrote:

On 2009-03-17, Jeff <jeff_thies (AT) att (DOT) net> wrote:
I've never used the after pseudo selector so I thought I'd give it
a spin.

A strange motive. And it's not a pseudo selector; it's a selector that is
said to refer to pseudo-elements.

It doesn't seem to work with img

That' understandable due to incomplete testing.

Why is that? It works with other inline and block level elements.

For some values of "works", excluding "has the declared and desired effect
in most cases".

An image is a replaced element. You're inserting text _inside_ it,

Well, sort of. You're inserting data inside the "formatting object"
generated for the element.

:after doesn't mean "after the element"
but "inside it, at the end".

Yes, that would be more accurate, but there is a long tradition in CSS in
misnaming properties, values, and selectors. :-)

BTW, what is the level of support?

Firefox, Opera and Konqueror all support it.

Which means it's not supported in the great majority of browsing situations
on the web.

Besides, at least Firefox and Opera have different interpretations. On
Firefox, the :after contents is not displayed. On Opera, it is.

Actually, we had been warned; the CSS 2.1 draft (which says it should not be
cited as other than work in progress, but it's still the closest
approximation to a draft proposal for an excuse for some kind of surrogate
of a standard for CSS that we have) says:

"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."

That's really an euphemism for "we don't define what they mean for images".
(There is no real definition for "replaced element" anyway, to start with.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela wrote:

Ben C wrote:

On 2009-03-17, Jeff <jeff_thies (AT) att (DOT) net> wrote:
I've never used the after pseudo selector so I thought I'd give it
a spin.

A strange motive.

I wasn't planning on using it just learning it. I have a perl background
and with perl there was always more than one way to do it. Some people
only knew one way, though. The same is true with CSS.

And it's not a pseudo selector; it's a selector that

is said to refer to pseudo-elements.

It doesn't seem to work with img

That' understandable due to incomplete testing.

Why is that? It works with other inline and block level elements.

For some values of "works", excluding "has the declared and desired
effect in most cases".

An image is a replaced element. You're inserting text _inside_ it,

Well, sort of. You're inserting data inside the "formatting object"
generated for the element.

That makes sense.

:after doesn't mean "after the element"
but "inside it, at the end".

Yes, that would be more accurate, but there is a long tradition in CSS
in misnaming properties, values, and selectors. :-)

BTW, what is the level of support?

Firefox, Opera and Konqueror all support it.

Which means it's not supported in the great majority of browsing
situations on the web.

Besides, at least Firefox and Opera have different interpretations. On
Firefox, the :after contents is not displayed. On Opera, it is.

I see that it does nothing in IE6, did not try IE7. That's enough to
put it back in the box for a few years.

Actually, we had been warned; the CSS 2.1 draft (which says it should
not be cited as other than work in progress, but it's still the closest
approximation to a draft proposal for an excuse for some kind of
surrogate of a standard for CSS that we have) says:

"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."

That's really an euphemism for "we don't define what they mean for
images". (There is no real definition for "replaced element" anyway, to
start with.)

This all seems a bit crazy to me. There's work being done with CSS3
and CSS2 is an incomplete project.

IE8 looks like a mixed bag on CSS3:

http://www.evotech.net/blog/2008/03/ie8-css-support-internet-explorer-8-and-css-3/

Jeff

On 2009-03-18, Jeff <jeff_thies (AT) att (DOT) net> wrote:

Jukka K. Korpela wrote:
Ben C wrote:

On 2009-03-17, Jeff <jeff_thies (AT) att (DOT) net> wrote:
I've never used the after pseudo selector so I thought I'd give it
a spin.

A strange motive.

I wasn't planning on using it just learning it. I have a perl background
and with perl there was always more than one way to do it. Some people
only knew one way, though. The same is true with CSS.

Except in CSS there are often no ways to do it.

Ben C wrote:

On 2009-03-18, Jeff <jeff_thies (AT) att (DOT) net> wrote:
Jukka K. Korpela wrote:
Ben C wrote:

On 2009-03-17, Jeff <jeff_thies (AT) att (DOT) net> wrote:
I've never used the after pseudo selector so I thought I'd give it
a spin.
A strange motive.
I wasn't planning on using it just learning it. I have a perl background
and with perl there was always more than one way to do it. Some people
only knew one way, though. The same is true with CSS.

Except in CSS there are often no ways to do it.

There almost always a way to do something like. That doesn't mean it's a
good way! Or that it works in more than one browser!

Jeff