How to add space (” “) after an element using :after selector in CSS ?
The :after selector in CSS is used to add 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 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></html> |
Output:
Example 2: This example uses :after selector to add space after an element.
<!-- 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:
Please Login to comment...