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

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss

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

Selector Name

Elements Are Styled If...

ie.jpg

fi.jpg

sa.jpg

go.jpg

op.jpg

:first-letter, ::first-letter

the first letter

first letter in text

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

:first-line, ::first-line

the first line of text

they are the first line of text

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

:after, ::after

After

space immediately before element

bullet.jpg8

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

:before, ::before

Before

space immediately after element

bullet.jpg8

bullet.jpg

bullet.jpg

bullet.jpg

bullet.jpg

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 red-a.jpg.

0418a.jpg

Click to view larger image

red-a.jpg The general syntax for pseudo-elements. Pseudo-elements can have either a single or double colon, but use a single colon at present for increased browser compatibility.

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 red-b.jpg.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice&#8217;s Adventures in Wonderland</title>
<style type="text/css" media="all">
   article p {
      color: gray;
      font-size: 1em;
      line-height: 1.5;
      margin: .875em 2em;
      }
   article p:first-of-type::first-letter {
      color: red;
      font-size: 3em;
      float: left;
      margin: -.25em .05em 0 0; }
   article p:first-of-type::first-line {
      color: black;
      font-size: 1.25em;
      font-weight: bold; }
</style>
</head>
<body>
<article class="chaptertext">
<h2>Chapter I
<span class="chaptertitle">Down the Rabbit-Hole</span>
</h2>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, <q>and what is the use of a book,</q> thought Alice, <q>without pictures or conversations?</q></p>
</article>
</body>
</html>
0419b.jpg

Click to view larger image

red-b.jpg The results of Code 4.11. A common typographic trick to draw the reader’s eye to the beginning of a paragraph is to use a drop cap and to bold the first line of text, as shown here.

  1. 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.

  2. 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.

  3. 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 style 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.
    h2 {...}

    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.)

  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.
    h2:before { content:... }

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice&#8217;s Adventures in Wonderland</title>
<style type="text/css" media="all">
   h2 {
      font-size: 2em;
      color: red; }
   h2::before {
      content:  url('bullet-01.png'); }
   h2::after {
      content: url('bullet-02.png'); }
</style>
</head>
<body>
<article class="chaptertext">
<h2> Chapter I
<span class="chaptertitle">Down the Rabbit-Hole</span>
</h2>
<p>Alice was beginning to get very tired
→ of sitting by her sister on the bank,
→ and of having nothing to do: once or
→ twice she had peeped into the book
→ her sister was reading, but it had
→ no pictures or conversations in it, <q>
→ and what is the use of a book,</q>
→ thought Alice, <q>without pictures or
→ conversations?</q></p>
</article>
</body>
</html>
0420a1.jpg

red-c.jpg bullet-01.png & bullet-02.png will be used as flourishes around titles.

0421b.jpg

Click to view larger image

red-d.jpg The header now has a bit of flourish added before and after by the CSS. These images take up space as if they were in an image tag, but do not show up in the HTML code.

  1. 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.
    h2:after { content:... }

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

    The pseudo-element syntax in CSS3 has undergone a slight change from the CSS2 syntax (which is rare). Pseudo-elements now have a double colon to distinguish them from pseudo-classes. Existing pseudo-elements can use either single or double colons. New and future pseudo-elements should use double colons, but will work with a single colon.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus