Copyright © tutorialspoint.com
The :before pseudo-element is used to insert some content before an element.
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 pseudo-element is used to insert some content after an element.
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
Copyright © tutorialspoint.com