CSS
How can I add white space before an element’s content using CSS?
In this article, we will learn How to add white space before an element with the help of CSS.
When we have a paragraph or some text within a container element, there occurs a need where we want to add white space just before the beginning of the content.
With the help of CSS pseudo code, we can add space before any element on the HTML document.
How can I add white space before an element’s content using CSS?
We can add the white space before an element’s content with the help of pseudo CSS.
The white space can be added with the help of the CSS property content and giving it the Unicode value “\00a0”.
Applying this property to a paragraph or any other container element will allow a space just before the content begins.
We will quickly look into practical code syntax for this topic.
CSS :-
p:before {
content: "\00a0";
}
HTML :-
<p>This is a text in this para that is for demonstration purpose. This is a text in this para that is for demonstration purpose.</p>
Output :-
In the CSS code section, we have defined a pseudo element and have used the content property giving it the value in form for unicode text.
In the HTML code section, we have created a paragraph and placed some text within the paragraph. We can see that there is no space in our HTML document at the beginning of this paragraph.
In the output image, it can be seen that there is a white space that can be seen at the beginning of the paragraph.
Recap
As a quick recap, we have witnessed the CSS code for adding a white space just before the beginning of an element’s content.
This can be done with the help of the content property and unicode text applied to the element.
Hoping for the best & clear understanding in this blog article.
