13.6. Pseudoelements

Pseudoelements are another virtual construct to help apply styles dynamically to elements within a document. For example, the :first-line pseudoelement applies a style to the first line of an element dynamically—that is, as the first changes size (longer or shorter), the user agent adjusts the style coverage accordingly.

13.6.1. :first-line

The :first-line pseudoelement specifies a different set of property values for the first line of elements. This is a powerful feature; as the browser window changes widths, the "first line" of an element can grow or shrink accordingly, and the style is applied appropriately. This is illustrated in the following code and in Figure 13-2, which shows two browser windows of different widths:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>First-line formatting</title>
  <style type="text/css">
    p:first-line { text-decoration: underline; }
    p.noline:first-line { text-decoration: none; }
  </style>
</head>
<body>
<h1>IN CONGRESS, July 4, 1776.</h1>
<p class="noline">The unanimous Declaration of the thirteen
United States of America,</p>
<p>When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial