Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

Working with Pseudo-elements

A pseudo-element is a specific, unique part of an element—such as the first letter or first line of a paragraph—that can be styled independently of the rest of the element. (For a list of other pseudo-elements, see Table 4.5.)

Table 4.5 Pseudo-Elements

Format

Name

Elements Are Styled If...

Compatibility

:first-letter, ::first-letter

the first Letter

first letter in text

IE5.5, FF1, O3.5, S1, CSS1

:first-line, ::first-line

the first line of text

they are the first line of text

IE5.5, FF1, O3.5, S1, CSS1

:after, ::after

After

space immediately before element

IE8, FF1, O5, S1, CSS2

:before, ::before

Before

space immediately after element

IE8, FF1, O5, S1, CSS2

Working with first letters and lines

You can access the first letter of any block of text directly using the :first-letter pseudo-element. The first line of any block of text can be isolated for style treatment using the :first-line pseudo-element.

To highlight the beginning of an article:

  1. Style the default version of the element.
    article p {...}

    Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :first-letter pseudo-element (Code 4.11).

    Code 4.11. Styles are set for the first letter and first line of the first paragraph in an article circle-b.jpg.

    <!-- HTML5 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>...</title>
    <style type="text/css" media="all">
     article p {
      font-size: 16px;
      line-height: 24px;
      color: rgb(102,102,102) }
     article p:first-of-type:first-letter {
      color: red;
      font-size: 3em;
      float: left;
      margin-right: 5px; }
     article p:first-of-type:first-line {
      font-size: 1.25em;
      font-weight: bold;
      color: rgb(0,0,0); }
    </style>
    </head>
    <body>
    <article>
    <h1>Alice's Adventures in Wonderland</h1>
     <p>The moment Alice appeared,...</p>
     <p>The executioner's argument was,...</p>
     <p>The King's argument was,...</p>
    </article>
    </body>
    </html>
  2. Style the first letter of the element if it is the first of its type. Type the selector you want to style the first letter of (article p), a colon (:), and then first-letter.
    article p:first-of-type: first-letter {...}

    To affect only the first paragraph in an article, you can add the :first-of-type pseudo-class, as in this example.

  3. Style the first line of the element’s text if it is the first of its type. Type the selector (article p) for which you want to style the first letter, a colon (:), and then first-line.
    article p:first-of-type: first-line {...}

    In this example, the first-of-type pseudo-class is added so that only the first paragraph in an article is styled.

  4. The element’s first letter and first line of text is styled if it is the first of its type in the parent element. Add the class attribute to the relevant HTML tag.
    <p>...</p>

    Although you do not have to use a class, you generally will want to selectively style the first letter of elements rather than styling them all universally.

Setting content before and after an element

The :before and :after pseudo-elements can be used to generate content that appears above or below a selector. Generally, these pseudo-classes are used with the content property. (See “Adding Content Using CSS ” in Chapter 9.) The pseudo-elements let you add and style repetitive content to the page in a consistent way.

To set content before and after an element:

  1. Style the element.
    h1 {...}

    Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :before and:after pseudo-elements. (See Code 4.12.)

    Code 4.12. Before and after pseudo-elements are used to add content—images circle-c.jpg, in this case—to the page header circle-d.jpg.

    <!-- HTML5 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>...</title>
    <style type="text/css" media="all">
     h1 {
      font-size: 2em;
      color: red;
      font-style: italic; }
     h1:before {
      content: url('../_images/bullet-01.png'); }
     h1:after {
      content: url('../_images/bullet-02.png'); }
    </style>
    </head>
    <body>
    <h1>Alice's Adventures in Wonderland</h1>
     <p>The moment Alice appeared,...</p>
     <p>The executioner's argument was,...</p>
     <p>The King's argument was,...</p>
    </article>had a head could be beheaded, and that you weren't to talk nonsense.</p>
    </article>
    </body>
    </html>
  2. Add content before the element. Type the selector (HTML, class, or ID) you want to add content before, a colon (:), and then the keyword before.
    h1:before { content:... }

    Next, declare the content property and define what generated content goes before the element and how it should be styled.

  3. Add content after the element. Type the selector (HTML, class, or ID) you want to add content after, a colon (:), and then the keyword after.
    h1:after { content:... }

    Next, declare the content property and define what generated content goes after the element and how it should be styled.

  • + Share This
  • 🔖 Save To Your Account