Examples of various properties of the pseudo element first letter

Just a simple unordered list with a single pixel blue border. Each list item, has a first-letter pseudo element, with various properties as mentioned applied. Most items have the previous properties applied, unless otherwise mentioned.

• color properties, just to show you first-character pseudo class in action
• border properties, not the first in logical order, but useful to show you what is happening
• font properties, here the just increase the first letter height to 1.5em (making the relative line height 2.25em to the rest of the list item.
• text-transform, enough said.
• line-height, decreased the line height to 1em so line height from first letter is the same as the rest of the list item.
• line-height, increased the line height to 2em so line height from first letter is the double the line height of the rest of the list item.
• background properties, I have used background color, you can of course use background-image.
• margin properties, though it appears only margin-top and margin-bottom works when combined with float.
• margin properties, negative margins, unfortunately IE can not cope when the margin takes first-letter outside the original container.
• padding properties, note padding does not affect the size or text flow of the holding container unless combined with float. So padding has only added to this and the float right examples.
• text-decoration with more negative margin and increased line height as part of an experiment

• letter-spacing, behaves similar to padding-left. unless you use text decoration strikethrough or underline
• vertical-align top, only works if float: none; the default. Note line-height set to 2em for first-letter all vertical-align examples.
• vertical-align bottom, with extra text to show the effects of text align.
• vertical-align baseline though with these settings you can not see the differences between vertical-align baseline, vertical-align centerline, vertical-align mathline and vertical-align topline.
• float, though I can not see a use for float: right; neither does IE7 it treats float: right; as float: left;
• floated left. Extra additional text has been added to show what will happens when floated first-letter and multiple lines of text. Margin has not included in this example.
• clear,not demonstrated here as it only has affect when in the flow of other floated elements. Note this is floated left with both margin and padding applied.
• text indent, works quite differently in Firefox and Safari with and without float. Please compare with the element below and notice what happens this is float:left; I had to increase the amount of text her, because floated first-letter was affecting the display on the next item.
• text indent, this is what happens when you do not float first letter. Exactly the same as item above sans float: left; and again different in Safari and Firefox.
• “text” indent, same again with a single quote for punctuation check.

Back to the post explaining first-letter pseudo element