Related Articles

Related Articles

How to use SVG with :before or :after pseudo element ?
  • Last Updated : 26 Nov, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 backgorund 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 backgorund 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :