How to add space (” “) after an element using :after selector in CSS ?
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:
Contact Us