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
Various tricks for :before pseudo elements using position property in CSS
The CSS :before pseudo-element allows you to insert content before an HTML element. When combined with the position property, you can precisely control where this content appears relative to its parent element, creating effects like custom icons, tooltips, notification badges, and styled form elements.
Syntax
selector:before {
content: "text or symbol";
position: absolute | relative | fixed | static;
top: value;
left: value;
right: value;
bottom: value;
}
Example 1: Custom List Icons with Absolute Positioning
The following example creates custom checkmark icons for list items using absolute positioning
<!DOCTYPE html>
<html>
<head>
<style>
ul {
padding-left: 40px;
}
li {
list-style-type: none;
position: relative;
margin: 10px 0;
}
li:before {
content: "\2713";
position: absolute;
left: -30px;
color: green;
font-weight: bold;
font-size: 16px;
}
</style>
</head>
<body>
<h3>Custom List Icons with :before Positioning</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>
A list appears with green checkmark symbols positioned to the left of each item, replacing default bullet points.
Example 2: Notification Badge Positioning
This example demonstrates creating a notification count badge positioned on top of an icon
<!DOCTYPE html>
<html>
<head>
<style>
.notification-container {
position: relative;
display: inline-block;
}
.notification-container:before {
content: "3";
position: absolute;
top: -8px;
right: -8px;
background-color: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.bell-icon {
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<h3>Notification Badge with Absolute Positioning</h3>
<span class="notification-container">
<span class="bell-icon">?</span>
</span>
</body>
</html>
A bell icon appears with a red circular badge containing "3" positioned at the top-right corner.
Example 3: Tooltip Creation with Transform Positioning
This example shows how to create tooltips using :before with absolute positioning and transforms
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: help;
}
.tooltip:hover:before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 1;
visibility: visible;
}
.tooltip:before {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
</style>
</head>
<body>
<h3>Hover Tooltip with Centered Positioning</h3>
<p>Hover over the <span class="tooltip" data-tooltip="This is a helpful tooltip!">highlighted text</span> to see the tooltip.</p>
</body>
</html>
Text appears with a highlighted section. When hovered, a dark tooltip with white text appears centered above the highlighted area.
Example 4: Custom Checkbox with Relative Positioning
This example creates a custom checkbox using :before with relative positioning
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
.checkbox-label {
display: inline-flex;
align-items: center;
cursor: pointer;
margin: 10px 0;
}
.checkbox-label:before {
content: "";
width: 18px;
height: 18px;
border: 2px solid #007bff;
border-radius: 3px;
margin-right: 10px;
display: inline-block;
position: relative;
background-color: white;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked + .checkbox-label:before {
content: "\2713";
background-color: #007bff;
color: white;
text-align: center;
line-height: 14px;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Custom Checkbox with :before Positioning</h3>
<input type="checkbox" id="option1">
<label for="option1" class="checkbox-label">Option 1</label><br>
<input type="checkbox" id="option2">
<label for="option2" class="checkbox-label">Option 2</label><br>
<input type="checkbox" id="option3">
<label for="option3" class="checkbox-label">Option 3</label>
</body>
</html>
Custom blue checkboxes appear with labels. When clicked, they show a white checkmark on a blue background with smooth transitions.
Conclusion
The :before pseudo-element combined with positioning properties provides powerful control over content placement. Use absolute positioning for overlays and badges, relative positioning for inline elements, and transforms for precise centering and advanced layouts.
Updated on: 2026-03-15T17:14:29+05:30
901 Views
Advertisements