Copyright © 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

Copyright © tutorialspoint.com