CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM
|
CSS Pseudo-element :before and :after
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
|
|
|