Underline the first letter of an anchor tag in a list on hover using jQuery or CSS

Question

I am trying to underline the first letter of a link on hover for each item in a list. I have tried the CSS first_letter selector, but all that does is underlines the first letter of the first item.

Here is the list:

<ul class="list">
   <li><a class="underline" href="Lingua%20Franca.html">Lingua Franca</a></li>
   <li><a class="underline" href="Within%20Within.html">Within Within</a></li>
   <li><a class="underline" href="Kind%20Pockets.html">Kind Pockets</a></li>
</ul>

I have tried this and many variations of it:

a.underline:hover:first-letter{
  text-decoration: underline;
}

Answer 1

Well, ::first-letter is a pseudo-element, not a pseudo-class, so it requires two colons:

http://www.w3.org/TR/css3-selectors/#first-letter

However, I started playing around in JSFiddle in Chrome and it seems like there are issues using them together. Even before factoring in anchor element and its default underline, I tried this with vanilla LIs (no links in them):

li::first-letter:hover {
 text-decoration: underline;   
}

and

li::first-letter:hover {
 text-decoration: underline;   
}

and neither of them worked, although

li::first-letter {
 text-decoration: underline;   
}

does work.

You might just have to wrap those first letters in a span with a custom class instead of relying on ::first-letter.

Answer 2

If you want to do it with jQuery, this will work as long as the contents of the anchor aren't complex

http://jsfiddle.net/rEcx7/1/

$(function(){
    $("#stuff li a").hover(function(){
        var thisHtml=$(this).html();

        $(this).html("<span style='text-decoration: underline;'>"+thisHtml.substring(0,1)+"</span>"+thisHtml.substring(1));
    },function(){
       $(this).find("span").contents().unwrap();
    }); 
});