after

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/selector.html#before-and-after

Description
This pseudoelement works together with the attribute «content» and it is used for the necessary content output after the element to which is added.
«After» has following features:
1. Block, inline, none, marker are the values of “display” features, when “after” is added to the block element. All the other values will be interpreted as “block”.
2. When you add «after» to built-in element, the value «display» will be only "inline" and "none". All other values will be interpreted as “inline”.

Syntax

 Element:after { content: "text" }

Arguments
No.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>after</title>
  <style type="text/css">
    p.new:after {
      content: "New!"; /* Add-on text */ 
      color: #333; /* Text color */ 
      background-color: #fc0; /* Background color */ 
      font-size: 90%; /* Font size */ 
      padding: 2px; /* Fields around the text */ 
    }
  </style>
 </head>
 <body>
  <h2>Stories</h2>
  <p class="new">Story about how it was necessary to make the grave, it had begone to dig and then to bury and what was the result of it.</p>
  <p>Story about how mysterious pink tracks with six fingers appeared near the dining hall and why it happened.</p>
 </body>
</html>

The result of this example is shown on the figure 1.