Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use SVG with :before or :after pseudo element?
The :before and :after pseudo-elements in CSS allow you to insert content before or after an element without adding extra HTML markup. These pseudo-elements are particularly useful for decorative content and can be used to display SVG images alongside your existing content.
There are two primary methods to use SVG with :before and :after pseudo-elements
Using the content property Directly embed SVG URLs or inline SVG code in the content property.
Using the background-image property Set SVG as a background image for the pseudo-element.
Syntax
Following is the basic syntax for using pseudo-elements
selector:before {
content: "";
/* additional properties */
}
selector:after {
content: "";
/* additional properties */
}
Note: The content property is required for pseudo-elements to appear, even if it's an empty string.
Using the Content Property
The content property can directly reference an SVG file URL or contain inline SVG code. This method is straightforward but offers limited control over SVG sizing and positioning.
Example SVG with Content Property
Following example demonstrates adding SVG icons before and after text using the content property
<!DOCTYPE html>
<html>
<head>
<title>SVG with Content Property</title>
<style>
.decorated-text {
font-family: Arial, sans-serif;
font-size: 18px;
padding: 20px;
text-align: center;
}
.decorated-text:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23ff6b6b"/></svg>');
margin-right: 10px;
}
.decorated-text:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%2351cf66"/></svg>');
margin-left: 10px;
}
</style>
</head>
<body>
<h2>SVG with :before and :after using Content Property</h2>
<p class="decorated-text">This text has SVG circles before and after</p>
</body>
</html>
The output displays red and green circles flanking the text
SVG with :before and :after using Content Property ? This text has SVG circles before and after ?
Using the Background-Image Property
The background-image approach provides better control over SVG sizing, positioning, and repetition. You must set explicit dimensions for the pseudo-element and use content: "" to make it visible.
Example SVG with Background-Image Property
Following example shows how to use SVG as background images in pseudo-elements
<!DOCTYPE html>
<html>
<head>
<title>SVG with Background-Image Property</title>
<style>
.icon-text {
font-family: Arial, sans-serif;
font-size: 18px;
padding: 20px;
text-align: center;
position: relative;
}
.icon-text:before {
content: '';
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="%23ffd700"/></svg>');
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.icon-text:after {
content: '';
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%2300c851"/></svg>');
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 24px;
width: 24px;
margin-left: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>SVG with :before and :after using Background-Image</h2>
<p class="icon-text">This text has star and checkmark SVG icons</p>
</body>
</html>
The output shows a star before the text and a checkmark after
SVG with :before and :after using Background-Image ? This text has star and checkmark SVG icons ?
Using Inline SVG with Content Property
You can also embed SVG code directly in the content property using data URLs. This approach keeps everything in your CSS file.
Example Inline SVG Icons
Following example demonstrates inline SVG usage with custom arrows
<!DOCTYPE html>
<html>
<head>
<title>Inline SVG with Pseudo-elements</title>
<style>
.arrow-text {
font-family: Arial, sans-serif;
font-size: 16px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
margin: 20px;
display: inline-block;
}
.arrow-text:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="%23007bff"/></svg>');
vertical-align: middle;
margin-right: 8px;
}
.arrow-text:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" fill="%23007bff"/></svg>');
vertical-align: middle;
margin-left: 8px;
}
</style>
</head>
<body>
<h2>Inline SVG Arrows with Pseudo-elements</h2>
<div class="arrow-text">Navigate between sections</div>
</body>
</html>
The output shows blue arrow icons pointing left and right
Inline SVG Arrows with Pseudo-elements ? Navigate between sections ?
Key Differences Between Methods
Following are the main differences between the two approaches
| Content Property | Background-Image Property |
|---|---|
| Simple one-line syntax | Requires multiple CSS properties |
| SVG size determined by original dimensions | Full control over SVG size and scaling |
| No positioning control | Complete positioning and alignment control |
| SVG appears inline with text flow | Can be positioned independently of text |
| No repetition control | Can control repetition with background-repeat |
| Better for simple decorative icons | Better for complex layouts and precise control |
Best Practices
Use data URLs for small, simple SVGs to avoid external HTTP requests.
Set explicit dimensions when using the background-image method.
Include fallbacks for browsers that don't support SVG in pseudo-elements.
Optimize SVG code by removing unnecessary attributes and whitespace.
URL-encode SVG properly when using data URLs, especially for special characters.
Conclusion
Both the content property and background-image methods allow you to add SVG graphics to pseudo-elements effectively. Use the content property for simple decorative icons and the background-image approach when you need precise control over sizing and positioning. Choose the method that best fits your design requirements and maintenance preferences.
8K+ Views
