CSS :first-line pseudo-element

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS :first-line pseudo-element

Complete CSS Reference

## Definition

The :first-line pseudo-element adds a special style to the first line of a text.

## Examples

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:

    p {font-size: 12pt}
    p:first-line {color: #FF0000;font-variant:small-caps}

    <p>Some text that ends up on two or more lines</p>

The output could be something like this:

Some text that ends up on two or more lines

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.

Note: The "first-line" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-line" pseudo-element:

- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear

Pseudo-elements can also be combined with CSS classes:

    p.article:first-line {color: #FF0000}

    <p class="article">A paragraph in an article</p>

The example above will set the first line of all paragraphs with class="article" to red.

## Try-It-Yourself Demos

Make the first line special
This example demonstrates how to add a special effect to the first line of a text.

Make the first letter and first line special
This example demonstrates how to add a special effect to the first letter and the first line of a text.

Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)