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

04 Aug, 2021
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:
sumitgumber28
CSS-Misc
CSS-Selectors
HTML-Misc
Picked
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.