first-letter pseudo element

What it does:

Lets you style the first letter of any element.

Supported by:

Firefox, Safari, Chrome, Opera, IE5.5+

Known bugs

They are detailed at pseudo-class, pseudo-element, pseudo-CSS. IE6 & 7 has more than a few, negative margins and vertical-align separating from the box are the most frustrating for me. As well as Safari and Firefox handling the text-indent property differently (sorry but I can not get my head around the specs today).

Not support by:

Old browsers and some mobile browsers.

What happens when first-letter is not supported:

The first letter is not individually styled, instead it has the same styling as the rest of the element.

Properties

Only a limited number of properties can be applied to first-letter:

  • color properties
  • border properties
  • font properties
  • text-transform
  • line-height
  • background properties
  • margin properties, though it appears only margin-top and margin-bottom works when combined with float.
  • padding properties, note padding-bottom does not affect the size or text flow of the holding container unless combined with float.
  • text-decoration
  • letter-spacing, only when floated
  • clear, only when floated
  • vertical-align, only when not floated
  • float
  • clear

If you want to see the properties in action here is an example.

Screenshots from IE7, Firefox 3.1b and Safari 3 (note the differences in the last second and third last items in Firefox and Safari, otherwise it is the usual IE vs everybody else.)

Issues

If you look at the examples, you will see two choices. After working out what properties you can use with IE, you will either spend a time tweaking margin-top and padding-top when combined with float or learning the difference between vertical alignment: baseline, centerline, mathline and topline (another experiment for me) and adjusting line-height, depending on your desired results.

Example

Not yet, I will combine it adjacent selectors for an example shortly.

Will I use it now?

I will definitely look at combining first-letter, adjacent selectors and @font-face when I redesign this blog and for any other project.

2 Responses to “first-letter pseudo element”

  1. John Faulds Says:

    I wrote an article about some other buggy aspects of first-letter implementation a while ago too.

  2. Nick Says:

    Hi John, thanks for that, I will try and avoid using first-letter with links or :hover pseudo element. I am now having fun with the differences between how Safari and Firefox handle floated first-letter and line-height, (which is not apparent in the above example).

Google