The :after selector in CSS is used to add the same content multiple times after the content of other elements. It inserts something after the content of each selected element.
Syntax:
:after {
// CSS Property
}
Example 1: This example uses :after selector to add space after an element.
html
<!-- HTML code to add space after the selected element -->
<!DOCTYPE html><html>
<head>
<title>
Add space after selected element
</title>
<!-- Style to add space after selected
element -->
<style>
p:after {
content:"\00a0 World-with space"
}
p.GFG:after {
content:"World-without space"
}
</style>
</head>
<body>
<p>Hello</p>
<p class="GFG">Hi</p>
</body>
</html>
|
Output:
Example 2: This example uses :after selector to add space after an element.
html
<!-- HTML code to add space after the selected element -->
<!DOCTYPE html><html>
<head>
<title>
Add space after selected element
</title>
<!-- Style to add space after the
selected elements -->
<style>
h2 {
text-decoration: underline;
}
h2.space:after {
content: " ";
white-space: pre;
}
</style>
</head>
<body>
<h2>I don't have a space:</h2>
<h2 class="space">I have a space:</h2>
</body>
</html>
|
Output: