combine a pseudo-class with a pseudo-element

looking for a CSS hack that'd look something like "a:hover:first-letter"

[durumpoulet]

Hi everybody

i am looking for a css hack that would let me do something like this:

a:hover:first-letter

i've looked all around on [xml, css, w3c or eric meyer] -related web sites and no clue to be found.

if any of you has an idea that would do the trick and support my strong belief that yes, css can do anything, please let me know

(ps: i'm working on xhtml and not on xml, so xslt won't help, thanx)

[Adrian2k4]

Try the following: (I havent tryed it, was just an idea)

a { font-family:'Arial'; font-size:10pt; color:#0000FF; }
a:first-letter { color:#FF0000; }
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
a:focus { text-decoration:underline; }

[SuzyUK]

Hi durumpoulet - Welcome to WebmasterWorld

The answer is the CSS2 Recs.. [w3.org]

The :first-letter pseudo-element matches parts of block-level elements only.

An anchor is an inline element by default so it might work, if your design allows you to make it into a block level element (i.e. list of links?)

a {display: block;}
a:link:first-letter { color:#f00; }
a:hover:first-letter { color: #0f0;}

Suzy