[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2007-07-28
Medium Priority
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
  • 2
LVL 12

Accepted Solution

oceanbeach earned 1000 total points
ID: 19585381
Hello pnowell,

Have you tried...

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

I hope this helps!


Author Comment

ID: 19585441
Thanks, I did and it worked.  
LVL 12

Expert Comment

ID: 19585446
Hi pnowell,

Glad to help!


Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 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