How to add space (” “) after an element using :after selector in CSS ?
Last Updated :
03 Aug, 2023
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
<!DOCTYPE html>
< html >
< head >
< title >
Add space after selected element
</ title >
< 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
<!DOCTYPE html>
< html >
< head >
< title >
Add space after selected element
</ title >
< 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:
Share your thoughts in the comments
Please Login to comment...