Generated Content

Sometimes you want to add some content without necessarily adding any code to your HTML. For example, say you wanted to display the word "Announcement" before the first paragraph of a news announcement (see Figure 16-8). You could just put that into your HTML, but that would require extra work and extra code. It's also not really integral to the actual content; it's just a sort of introduction to the text. Also, if you later wanted to change "Announcement" to "News" you'd have the time-consuming task of identifying and changing that text throughout your site.

There's an easier way to insert stuff that isn't really part of an element's content. It's called generated content, and it's been around since CSS 2.1. However, it hasn't been very useful until Internet Explorer 8 came on the scene. Now, every major browser (except IE 6 and IE 7) understands generated content.

Note

You encountered generated content earlier in the book. It's part of one method for dealing with float problems (see Graphic Bullets).

You add generated content with the content property in combination with either the :before or :after pseudo-elements. You use :before to place stuff before a tag, and :after to place content after a tag. For example, say you want to add a paragraph symbol (¶) at the beginning of each paragraph (Figure 16-8) to add typographic distinction (or just to show off). You can do that with this style:

p:before {
  content: "¶";
}

The selector—p:before—applies to the location right before the beginning of the content inside the paragraph. The content property indicates what you want to place before each paragraph (in this case, a paragraph symbol). You can put any text you like between quotes, and it will appear in the specified location (before or after the tag). Beware: The text between quotes is printed as is, so you can't include HTML as part of the content (well, you can, but the tags will appear onscreen). So for example, if you had this style:

p:before {
  content: "<h2>Announcement</h2>";
}

You wouldn't end up with a heading 2 before each paragraph, just the text "<h2>Announcement</h2>".

Note

Trivial Pursuit Challenge Answer: The ¶ symbol is technically called a pilcrow.

Power Users' Clinic: The Future of Layout

Web designers always find a way to make good designs out of the worst technologies—HTML tables, for example—and have made the Web a much more beautiful place by creatively using floats (Chapter 12) and absolute positioning (Chapter 13). However, none of those techniques really approaches the level of control offered in desktop publishing programs. Fortunately, there's a lot of work being done on this front, with the CSS 3 Working Group busily crafting three separate CSS 3 modules to help make web page layout easier.

For example, if you've ever read a magazine, you know that columns are easier to read than text that goes all the way across a wide page. There's no easy way to create columns on web pages now, but the proposed multi-column layout module will make that task a snap. In fact, both Safari and Firefox have already implemented multiple columns. To see an example and learn more, visit www.css3.info/preview/multi-column-layout.

The CSS 3 grid positioning module (www.w3.org/TR/css3-grid) is another set of CSS properties aimed at making graphic designers' lives easier. The goal of this module is to let you define a grid—an invisible collection of columns—that you can then use to position and size elements. These properties would let you divide a page into, say, six 150-pixel columns—an underlying grid for the page—and then size other elements using grid measurements. For example,"make this div 3 columns wide and place it in the top of column 2." This module is a long way away from becoming reality, since no browser currently recognizes anything from this module.

Finally, the most interesting CSS 3 addition to layout will be the template layout module (www.w3.org/TR/css3-layout). The template layout properties will let you use letters to define a page's basic structure. For example, the following code divides the page into two rows, with the top row—aaa—being one unit, and the bottom row—bcd—being three units or columns:

body {
  display: "aaa"
           "bcd";
}

Positioning different page elements into the proper location uses a similar, notation:

  #head { position: a }
  #nav { position: b }
  #adv { position: d }
  #body { position: c }

Here, an element with ID head spans the entire page in the top row, while the nav, adv, and body elements sit side by side, each in its own column. Exciting stuff, but unfortunately, this module too is far from becoming a reality.

You can even insert an image by specifying a URL like this:

p:before {
  content: url("images/symbol.png");
}

And you can combine text with an image, like this:

p:before {
  content: "Paragraph" url("images/symbol.png");
}

This code prints the text "Paragraph" and adds the image symbol.png at the front of each paragraph.

You can style generated content like other elements, using any CSS property. For example, in Figure 16-8, the "Announcement" text uses a different font than the paragraph, and has a background color. That first paragraph has a class of announcement, so here's the style that creates the look pictured in Figure 16-8:

.announcement:before {
  content: "ANNOUNCEMENT";
  font: bold .6em Arial, Helvetica, sans-serif;
  color: #FFF;
  padding: 4px;
  background-color:red;
  margin-right: 10px;
}

All of those CSS properties apply to the :before pseudo-element, and since that holds the text "ANNOUNCEMENT," all of the properties are applied to that text.

Figure 16-8. CSS Generated Content lets you add supplemental, less critical content to spice up your pages. Add introductory boxes like the Announcement blurb at the beginning of the first paragraph, or elegantly close an entry with "<<fin" (bottom right) without adding extra HTML to the page.