CSS properties you may not have heard of - 1

Every so often (well, actually, quite often), I 'discover' a new CSS property that I have not used before. Here's one. The first-line pseudo-element may be used to add a different style to the first line of text of an element.

For example, the first line of a paragraph with a class of 'example' may be styled according to this first-line pseudo element style rule:

  p.example:first-line {
      color: #693;
      font-style: italic;
      font-size: 120%;
  }

Example paragraph where the first line is styled quite differently to the second line. In fact, the first line of this paragraph is an attractive green color, a larger font size, and italicised.

The first line ends/breaks where the browser says. This means that flexible layouts or user text resizing will change (the word) where the first line styling ends. Cool.

The first-line pseudo-element can only be used with block-level elements. However, not all properties can be used. 'Text' properties like font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, and clear, seem to be OK.

Browser support for the first-line pseudo-element is pretty good these days. Most modern browsers support it. This does not include IE6 - but IE7 is supportive.

Technorati : css