Open In App

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

Last Updated : 23 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG's scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image assets.:

Table of Content

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 leave the content property empty. The other CSS properties help to position and size the content properly.

Example: In this example we are using the :before and :after pseudo-elements to insert SVG content before and after an element's text content, respectively, adjusting their size with background properties.

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:

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: In this example we demonstrates the use of the :before and :after pseudo-elements to insert SVG content before and after an element's text content, respectively, adjusting their size with the zoom property.

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:


Next Article
How to Create Border Animation using CSS?

S
saideepesh000
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox