CSS first-letter not working in hover state when viewed with Firefox

Posted on 2007-07-28
Last Modified: 2012-06-27
When I use a larger first-letter pseudo element in paragraphs, they show up fine.  But if that first letter is in a link, the text-sizing is wiped out in hover states in Firefox (see example below) and is only restored with a refresh.

An ideal solution would be any snippet of CSS you possess that not only handles this problem, but any (or most) first-letter problems among all the major browsers.

Thanks for help on this,

body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; }
p:first-letter {font-size:1.4em;}
<p>Notice that the first letter of this paragraph and the next are enlarged using the first-letter pseudo element.  However the next paragraph starts with a link and, in Firefox, a hover state destroys the first-letter text sizing</p>
<p><a href="#">Link to nowhere</a> demonstrates how the hover state doesn't seem to work in Firefox.  Does anyone have a fix AND, while you're at it, does anyone have a snippet of CSS that handles discrepancies of first-letter across all the major browsers?</p>
Question by:pnowell
    LVL 12

    Accepted Solution

    Hello pnowell,

    Have you tried...

    a:first-letter {font-size: 1.4em}

    I hope this helps!


    Author Comment

    Thanks, I did and it worked.  
    LVL 12

    Expert Comment

    Hi pnowell,

    Glad to help!


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now