Pseudo-elements

Introduction

Pseudo-elements (or “fake” elements) allow you to style elements that are not in the document tree - such as the first line or first letter of some text.

Double or single colons?

In CSS1 and CSS2, pseudo-elements were defined using a single ":". In CSS3, pseudo-elements are defined using double "::".

/* CSS2.1 syntax */
p:first-line { }

/* CSS3 syntax */
p::first-line { }

The double "::" notation was introduced to make it easier to tell the difference between pseudo-classes and pseudo-elements.

Most browsers support both variations. However, if you need to support IE6-8, it may be best to continue using the single ":" notation.

::first-line pseudo-element (CSS1)

The ::first-line pseudo-element selector is written using an element, followed by ":" or "::", followed by "first-line".

/* syntax */
E::first-line { }
E:first-line { }

/* example */
p::first-line { }
p:first-line { }

Whitespace is not permitted within the selector.

/* Valid */
p::first-line { }
p:first-line { }

/* Invalid */
p:: first-line { }
p: first-line { }

How does it work?

The ::first-line pseudo-element selector targets the first line of content within the relevant element.

In the following example, the first line of the paragraph will be selected.

/* CSS selector */
p::first-line { }

<!-- HTML markup -->
<p>This is the first line
of a paragraph of text</p>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The ::first-line pseudo-element selector is buggy in IE6 and IE7.

Exercise 1: Write a ::first-line selector

Open this HTML file in an editor:
exercises-start/exercise-205-09-01.html

Write a CSS rule to style the first line of any <p> element. Set the color value to cadetblue.

/* Add styles here */
p::first-line {
  color: cadetblue;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-09-01.html

::first-letter pseudo-element (CSS1)

The ::first-letter pseudo-element selector is written using an element, followed by ":" or "::", followed by "first-letter".

/* syntax */
E::first-letter { }
E:first-letter { }

/* example */
p::first-letter { }
p:first-letter { }

Whitespace is not permitted within the selector.

/* Valid */
p::first-letter { }
p:first-letter { }

/* Invalid */
p:: first-letter { }
p: first-letter { }

How does it work?

The ::first-letter pseudo-element selector targets the first letter of content within the relevant element.

In the following example, the first letter of the paragraph will be selected.

/* CSS selector */
p::first-letter { }

<!-- HTML markup -->
<p>This is the first line
of a paragraph of text</p>

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The ::first-letter pseudo-element selector is buggy in IE6 and IE7.

Exercise 2: Write a ::first-letter selector

Open this HTML file in an editor:
exercises-start/exercise-205-09-02.html

Write a CSS rule to style the first letter of any <p> element. Set the color value to darkgoldenrod.

/* Add styles here */
p::first-letter {
  color: darkgoldenrod;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-09-02.html

::before pseudo-element (CSS2)

The ::before pseudo-element selector is written using an element, followed by ":" or "::", followed by "before".

/* syntax */
E::before { }
E:before { }

/* example */
.intro::before { }
.intro:before { }

Whitespace is not permitted within the selector.

/* Valid */
p::before { }
p:before { }

/* Invalid */
p:: before { }
p: before { }

The ::before pseudo-element selector is used in conjunction with the content property.

/* CSS selector */
p::before { 
  content: "hello";
}

How does it work?

The ::before pseudo-element selector is used to generate content.

This generated content is rendered within the specified element - before the elements real content.

<!-- HTML markup -->
<p>
  [generated content]content
</p>

Generated text should not be used for any meaningful content as it is inaccessible to assistive technologies.

Option 1: Generated content can include a text string. The generated text string is placed before the element’s content.

/* Generated content - text string */
p::before { content: "hello"; }

Text strings can be written inside single or double quotes.

/* single quotes */
p::before { content: 'hello'; }

/* double quotes */
p::before { content: "hello"; }

Single quotes can be used inside double quotes - and visa versa.

/* double inside single */
p::before { content: 'a "string"'; }

/* single inside double */
p::before { content: "a 'string'"; }

Double quotes cannot occur inside double quotes unless they are escaped with a backslash "\" symbol.

/* escaped singe quotes inside */
p::before { content: 'a \'string\''; }

/* escaped double quotes inside */
p::before { content: "a \"string\""; }

Option 2: Generated content can include an image. This will place the generated image before the element’s content.

/* Generated content - image */
p::before { content: url(a.gif); }

Option 3: Generated content can include an attribute. This will place the value of the attribute as text before the element’s content.

/* Generated content - attribute value */
p::before { content: attr(cite); }

<!-- HTML markup -->
<blockquote cite="http://www.abc.com">
  This is a paragraph of text.
</blockquote>

Option 4: Generated content can include a counter.

This allows authors to change the number order and numbering method of ordered lists, as well as add counter-increments to any element.

/* Generated content - counter-increment */
body {
  counter-reset: section;
}

p:before {
  content: counter(section);
  counter-increment: section;
  color: red;
}

Option 5: Generated content can include nothing. This allows authors to position and style a newly generated element.

/* Generated content - empty */
p::before { content: ""; }

Generated content can also include combinations of any of these five different options.

The following example will render the generated text string "class: " and then render any class names applied to the element.

/* Generated content - combinations */
p::before {
  content: "class: " attr(class);
}

Generated content cannot include HTML markup.

/* Invalid */
p::before {
  content: <p>test<p>;
}

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The ::before pseudo-element selector is not supported by IE6 or IE7.

Exercise 3: Write some ::before selectors

Open this HTML file in an editor:
exercises-start/exercise-205-09-03.html

Write a CSS rule to style the element with a class value of .example1.

Use a ::before pseudo-element to add a generated content text string of "hello".

/* Add styles here */
.example1::before {
  content: "Hello";
}

Write a second CSS rule to style the element with a class value of .example2.

Use a ::before pseudo-element to add a generated content background-image using url(exercise-205-09-03.png).

/* Add styles here */
.example2::before {
  content: url(exercise-205-09-03.png);
}

Write a third CSS rule to style the element with a class value of .example3.

Use a ::before pseudo-element to add generated content of an attribute's value. In this case, display the ID value.

/* Add styles here */
.example3::before {
   content: attr(id);
}

Write a fourth CSS rule to style the element with a class value of .example4.

Use a ::before pseudo-element to add blank generated content.

Set the pseudo-element with position: absolute, left: 0 and top: 0 so that it will sit in the top left corner of the element.

Set the pseudo-element with display: block, width: 20px and height: 20px to change it to a block-level element and give it size.

Set the pseudo-element with background-color: darkkhaki to give it a background color.

/* Add styles here */
.example4::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   width: 20px;
   height: 20px;
   background-color: darkkhaki;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-09-03.html

::after pseudo-element (CSS2)

The ::after pseudo-element selector is written using an element, followed by ":" or "::", followed by "after".

/* syntax */
E::after { }
E:after { }

/* example */
.intro::after { }
.intro:after { }

Whitespace is not permitted within the selector.

/* Valid */
p::after { }
p:after { }

/* Invalid */
p:: after { }
p: after { }

The ::after pseudo-element selector is used in conjunction with the content property.

/* CSS selector */
p::after { 
  content: "hello";
}

How does it work?

The ::after pseudo-element selector is used to generate content.

This generated content is rendered within the specified element - after the elements real content.

<!-- HTML markup -->
<p>
  content[generated content]
</p>

Generated text should not be used for any meaningful content as it is inaccessible to assistive technologies.

Option 1: Generated content can include a text string. This will place the generated text string after the element’s content.

/* Generated content - text string */
p::after { content: "hello"; }

Text strings can be written inside single or double quotes.

/* single quotes */
p::after { content: 'hello'; }

/* double quotes */
p::after { content: "hello"; }

Single quotes can be used inside double quotes - and visa versa.

/* double inside single */
p::after { content: 'a "string"'; }

/* single inside double */
p::after { content: "a 'string'"; }

Double quotes cannot occur inside double quotes unless they are escaped with a backslash "\" symbol.

/* escaped singe quotes inside */
p::after { content: 'a \'string\''; }

/* escaped double quotes inside */
p::after { content: "a \"string\""; }

Option 2: Generated content can include an image. This will place the generated image after the element’s content.

/* Generated content - image */
p::after { content: url(a.gif); }

Option 3: Generated content can include an attribute. This will place the value of the attribute as text after the element’s content.

/* Generated content - attribute value */
p::after { content: attr(cite); }

<!-- HTML markup -->
<blockquote cite="http://www.abc.com">
  This is a paragraph of text.
</blockquote>

Option 4: Generated content can include nothing. This allows authors to position and style a newly generated element.

/* Generated content - empty */
p::after { content: ""; }

Generated content can also include combinations of any of these four different options.

The following example will render the generated text string "class: " and then render any class names applied to the element.

/* Generated content - combinations */
p::after {
  content: "class: " attr(class);
}

Generated content cannot include HTML markup.

/* Invalid */
p::after {
  content: <p>test<p>;
}

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The ::after pseudo-element selector is not supported by IE6 or IE7.

Exercise 4: Write some ::after selectors

Open this HTML file in an editor:
exercises-start/exercise-205-09-04.html

Write a CSS rule to style the element with a class value of .example1.

Use a ::after pseudo-element to add a generated content text string of "Goodbye".

/* Add styles here */
.example1::after {
  content: "Goodbye";
}

Write a second CSS rule to style the element with a class value of .example2.

Use a ::after pseudo-element to add a generated content background-image using url(exercise-205-09-04.png).

/* Add styles here */
.example2::after {
  content: url(exercise-205-09-04.png);
}

Write a third CSS rule to style the element with a class value of .example3.

Use a ::after pseudo-element to add generated content of an attribute's value. In this case, display the ID value.

/* Add styles here */
.example3::after {
   content: attr(id);
}

Write a fourth CSS rule to style the element with a class value of .example4.

Use a ::after pseudo-element to add blank generated content.

Set the pseudo-element with position: absolute, right: 0 and top: 0, so that it will sit in the top right corner of the element.

Set the pseudo-element with display: block, width: 20px and height: 20px to change it to a block-level element and give it size.

Set the pseudo-element with background-color: moccasin to give it a background color.

/* Add styles here */
.example4::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   display: block;
   width: 20px;
   height: 20px;
   background-color: moccasin;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-09-04.html