Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Pseudo-element :before and :after


previous next AddThis Social Bookmark Button


Advertisements

The :before element:

Description:

The :before pseudo-element is used to insert some content before an element.

Example:

Following is the example which demonstrates how to use :before element to add some content before any element .

<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>

<p> This line will be preceded by a bullet.</p>

This will produce following black link:

This line will be preceded by a bullet.

This line will be preceded by a bullet.

This line will be preceded by a bullet.

To Become more comfortable - Do Online Practice

The :after element:

Description:

The :after pseudo-element is used to insert some content after an element.

Example:

Following is the example which demonstrates how to use :after element to add some content after any element .

<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>

This will produce following black link:

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements