CSS Selector :after

The ::after selector inserts content after the selected elements.

:after is a Pseudo-element and it generates a pseudo-element containing generated content placed after the content in the element.

By using :after we can insert generated content at the end of an element's content.

By default, this pseudo-element is inline, but this can be changed using the property display.

Examples:

a.external:after  {content: " "  url(image.gif);)
p:after {content: " | ";}

Summary

CSS Version: 2

CSS Syntax

CSS3 syntax(double-colon)

::after { 
   style properties 
}

CSS2 syntax(single-colon)

:after { 
   style properties 
}

Browser compatibility


`::after`	Yes	9.0	Yes	Yes	Yes

Internet Explorer 8.0 supports the single-colon syntax.

Example

An example showing how to use :after CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
p:after{<!--from  w ww . j ava2  s  . com-->
   content:"added after";
}
</style>
</head>

<body>
   <p>this is a paragraph.</p>

</body>
</html>

Click to view the demo

Example 2

Adding after content for list.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li:after {<!--  w w  w . j  a v a2  s.  c  o m-->
 content: ", "; 
}
</style>
</head>
<body>
  <ul>
   <li>Database</li>
   <li>Privacy</li>
   <li>Best</li>
   <li>Whatever</li>
   <li class="last">Make One</li>
  </ul>
</body>
</html>

Click to view the demo

Example 3

The following code adds after content for class named last.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li.last:after {<!--   ww  w  . j  av a2 s  .c om-->
 content: ".";
}
</style>
</head>
<body>
  <ul>
   <li>Database</li>
   <li>Privacy</li>
   <li>Best</li>
   <li>Whatever</li>
   <li class="last">Make One</li>
  </ul>
</body>
</html>

Click to view the demo