Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use SVG with :before or :after pseudo element?
The :before and :after pseudo elements are used to add the content just before the start of an HTML element and just at the end of the same or any other element. These pseudo selectors help to add content or any other effect without using the un-necessary elements in the HTML DOM. You can add content or any color and CSS effects on the element using these selectors. The :before selector as the name suggests will add the content before the element and the :after element will add the content after the element.
You can add any image, color, background effects etc using these selectors. In this article, we will use these selectors to add SVG images before and after the elements. There are two ways of doing this as listed below −
Using the content property of these selectors.
Using the background-image property of CSS.
Let us now discuss these methods in details with their practical implementation inside the different code examples for each one of them.
By using the content property
The content property is the CSS property that is used to add any kind of content to the HTML elements. We can use this property to add a SVG image content before as well as after the elements by using it inside the :before and :after pseudo selectors.
Syntax
The below syntax will show how to use the content property inside the pseudo selectors to add any kind of content −
htmlElement:before / :after{
content: "write your content";
}
Let us now understand the use of these selectors to add a SVG before and after the HTML element using the content property by practically implementing it inside the code example.
Steps
Step 1 − In the first step, we will define a HTML element to add the content before and after to it using the CSS properties.
Step 2 − In this step, we will assign a class to the HTML element which will be used to select the element and add the before and after content.
Step 3 − In the final step, we will select the HTML element and add the SVG image before and after the element using the pseudo selectors.
Example
The below example will illustrate the use of the content property to add a SVG before and after the HTML element −
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.result:before{
content: url('https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg');
zoom: 20%;
}
.result:after{
content: url('https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg');
zoom: 20%;
}
</style>
</head>
<body>
<center>
<h2>Use SVG with :before or :after pseudo element</h2>
<p>The SVG images before and after the below element are added using the :before and :after pseudo elements.</p>
<p class = "result">Smily emoji before and after this content added using the <b> content </b> property.</p>
</center>
</body>
</html>
In the above example, we have used the content property inside the pseudo selector elements to add the SVG image before and after the actual text content of the HTML element. This is the first method of using the SVG with :before and :after pseudo elements.
By using the background-image property
The background image property is used to add one or more than one background images to a HTML element. We can use this property to add the SVG image before and after the HTML element as a background image of :before and :after pseudo elements.
Syntax
The syntax below will show hoe to use the background-image property of CSS to add a background image to the :before and :after pseudo elements −
htmlElement:before / :after{
background-image: url(url of svg image);
}
Let us now understand the use of the background-image property in details to add content before and after element practically with help of code example.
Approach
The approach of this example is almost similar to the algorithm of the previous example. You just need to perform some changes in the previous code by replacing the content property in pseudo elements style by background-image property and some helper properties of background-image property.
Example
The example below will explain the changes in the previous algorithm and the use of the background-image property in details −
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.result:before{
content: '';
background-image: url('https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: inline-flex;
height: 30px;
width: 30px;
}
.result:after{
content: '';
background-image: url('https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: inline-flex;
height: 30px;
width: 30px;
}
</style>
</head>
<body>
<center>
<h2>Use SVG with :before or :after pseudo element </h2>
<p>The SVG images before and after the below element are added using the :before and :after pseudo elements.</p>
<p class = "result"> Smily emoji before and after this content added using the <b> background-image </b> property.</p>
</center>
</body>
</html>
In this example, we have used the background-image property to set the SVG image as the background to the :before and :after pseudo elements. This is another way of using the SVG to before and after pseudo elements other than the content property method.
Conclusion
In this article, we have learned about the two different ways or methods of using the SVG with the :before and :after pseudo elements with help of code examples. We have discussed the both of these methods in details by implementing them practically with the help of code examples and understand the working of them.
705 Views
