Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add space (" ") after an element using :after selector in CSS?
The CSS :after pseudo-selector allows you to insert content after an element. When used with a space character (" ") in the content property, it creates visual spacing after elements without affecting the layout structure.
Syntax
selector:after {
content: " ";
}
Example: Adding Space After Elements
The following example demonstrates how to add space after different elements using the :after selector
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.spaced-word:after {
content: " - ";
}
.list-item:after {
content: " | ";
}
.heading:after {
content: " ?";
color: green;
}
</style>
</head>
<body>
<h3 class="heading">Task Completed</h3>
<p>Items:
<span class="spaced-word">Apple</span>
<span class="spaced-word">Banana</span>
<span class="spaced-word">Orange</span>
</p>
<nav>
<span class="list-item">Home</span>
<span class="list-item">About</span>
<span class="list-item">Contact</span>
</nav>
</body>
</html>
A heading "Task Completed ?" with a green checkmark appears. Below it, "Items: Apple - Banana - Orange -" shows words separated by dashes. A navigation menu displays "Home | About | Contact |" with pipe separators.
Example: Pure Space Addition
To add only blank space without any visible characters after elements
<!DOCTYPE html>
<html>
<head>
<style>
.word:after {
content: " ";
}
.container {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<span class="word">First</span>
<span class="word">Second</span>
<span class="word">Third</span>
</div>
</body>
</html>
A bordered container shows "First Second Third " with extra spaces after each word created by the :after selector.
Key Points
| Property | Description |
|---|---|
content: " " |
Adds a single space character |
content: " " |
Adds multiple spaces |
:after |
Inserts content after the element |
Conclusion
The :after pseudo-selector with the content property provides a flexible way to add spacing after elements. This technique is useful for creating separators, adding symbols, or controlling visual spacing without modifying the HTML structure.
Updated on: 2026-03-15T16:17:00+05:30
6K+ Views
Advertisements