Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Space After an Element Using After Selector in CSS
The space character (" ") is used to add space between elements in CSS. it used in the content property of a pseudo-selector, such as :after or :before, it creates a blank space that can be used to separate elements or add visual spacing to a web page.
In annexation to using the space character, we can also use other CSS properties such as margin, padding, border, or width to add space between elements. These properties allows to control the amount of space and the position of space between elements.
Adding space (" ") after an element using :after selector in CSS
The :after pseudo-selector is used to add content after the content of an element. This is also useful for adding separators, icons, or other visual enhancements to a web page. To add a space after an element using the :after selector, we need to set the content property to a space character (" ") and the display property to inline.
Here is syntax of how to use the :after selector to add a space after a heading element ?
:after {
content: " ";
}
It is important to note that the :after selector only adds content after the element, it doesn't change the layout of the element or its surrounding elements. It will also not add any space if the element is empty.
Example
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
body{
text-align:center;
background-color:pink;
}
h3:after {
content:" World"
}
h3.effect:after {
content:"to TutorialsPoint"
}
</style>
</head>
<body>
<h3>Hello</h3>
<p> space added after Hello</p>
<h3 class="effect" >Welcome</h3>
<p>No space added after Welcome</p>
</body>
</html>
To add spaces, the :after selector can also be used to add other types of content, such as text, images and list items.
Conclusion
The :after selector is a powerful tool in CSS that used to add content after an element, including spaces. It also be used to enhance the visual appearance of a website, create separators, or add icons and other images. By combining the :after selector with other CSS properties, It creates even more complex and dynamic effects. It is important to keep in mind that the :after selector only adds content after the element, it doesn't change the layout of the element or its surrounding elements.
6K+ Views
