Open In App

How to use SVG with :before or :after pseudo element ?

Improve
Improve
Like Article
Like
Save
Share
Report

The :before and :after pseudo-elements allow one to add styling to the webpage without adding unnecessary markup. SVG content can be added using these pseudo-elements by following the methods described below:

Method 1: Using the background-image property: The background-image property is used to set one or more background images to an element. We can also add the SVG content using this property and leaving the content property empty. The other CSS properties help to position and size the content properly.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .svg-demo {
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
 
        .text {
            text-align: center;
        }
 
        /* Using the :before pseudo-element
           to add the SVG content */
        .svg-demo:before {
            display: inline-flex;
            content: '';
 
            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-image: url('gfg_logo.svg');
            background-size: 40px 40px;
            height: 40px;
            width: 40px;
        }
 
        /* Using the :after pseudo-element
           to add the SVG content */
        .svg-demo:after {
            display: inline-flex;
            content: '';
 
            /* Using the background-image and
               its related properties to add
               the SVG content */
            background-image: url('gfg_logo.svg');
            background-size: 40px 40px;
            height: 40px;
            width: 40px;
        }
    </style>
</head>
 
<body>
    <p class="svg-demo">
        This is the normal content
    </p>
 
 
    <p class="text">
        The SVG images are added before
        and after the line using :before
        and :after pseudo-elements
    </p>
 
</body>
 
</html>


Output:

Method 2: Using the content property: The content property in CSS is used to conveniently generate content dynamically on a page. We can add the SVG content using this property on an empty pseudo-element. The other CSS properties help to position and size the content properly.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .svg-demo {
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
 
        .text {
            text-align: center;
        }
 
        /* Using the :before pseudo-element
           to add the SVG content */
        .svg-demo:before {
 
            /* Using the content property to
               set the background image */
            content: url('gfg_logo.svg');
 
            /* Using the zoom property to
               control the size of the SVG */
            zoom: 25%;
        }
 
        /* Using the :after pseudo-element
           to add the SVG content */
        .svg-demo:after {
 
            /* Using the content property to
               set the background image */
            content: url('gfg_logo.svg');
 
            /* Using the zoom property to control
               the size of the SVG */
            zoom: 25%;
        }
    </style>
</head>
 
<body>
    <p class="svg-demo">
        This is the normal content
    </p>
 
 
    <p class="text">
        The SVG images are added before
        and after the line using :before
        and :after pseudo-elements
    </p>
 
</body>
 
</html>


Output:



Last Updated : 04 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads