CSS ::before Selector
The ::before selector in CSS is a pseudo-element that is used to insert something immediately before the content of each selected element(s).
You can use the ::before pseudo-element to add or insert cosmetic content before an element using the content property without changing the HTML structure.
Here, cosmetic content means visual or decorative elements, such as icons, decorative text, background image, animation, etc.
By default, the ::before pseudo-element is inline, meaning it will behave like inline elements in CSS. However, you can make it block-level using display: block or display: inline-block. The ::before selector doesn’t modify the actual DOM structure.
Syntax of Using ::before Selector in CSS
The basic syntax for using ::before pseudo-element along with content property to insert something is as follows:
selector::before {
content: "";
/* Additional CSS styles */
}In the above syntax, the content property is essential with ::before pseudo-element to insert generated content. Without it, you cannot display pseudo-element. The value of content property can be text, images (via url()), or an empty string (“”) for styling effects.
Basic Examples of ::before Selector
Let’s take an example in which we will add “Note: ” before a paragraph.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "Note: ";
color: white;
background: red;
padding: 3px;
}
</style>
</head>
<body>
<p>Scientech Easy provides free educational resources.</p>
</body>
</html>
Output:
Let’s take an example in which we will add text before an element using ::before selector.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
content: "Welcome to ";
color: red;
}
</style>
</head>
<body>
<h2>Scientech Easy</h2>
</body>
</html>
This example code will give you output as “Welcome to Scientech Easy,” where “Welcome to” is styled in red color.
Adding Emoji Before Text of Button Element
Let’s take an example in which we will use ::before pseudo-element to add an emoji before the text of a button element.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button::before {
content: '👉';
margin-right: 10px;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
In this example, we have used the ::before pseudo-element with content property. The p::before selector will add the ‘👉’ emoji before the button text and include a 10px margin to create space between the emoji and the button text.
When you run this code, the button will display as: 👉 Click Me
This is a simple way to use the ::before pseudo-element to add content before an element, which enhances the visual appearance without any altering the HTML structure.
Advanced Example of CSS ::before Selector
Let’s take an example in which we will use ::before pseudo-element along with content property to create a triangle shape.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
.triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
.container {
position: relative;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="triangle"></div>
</div>
</body>
</html>
Output:
In this tutorial, you have learned CSS ::before selector with the basic examples. Always remember that without content property, ::before pseudo-element will not work. Always set content: “” even if no visible content is required.
