Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Various tricks for :before pseudo elements using position property in CSS
Generally, we add content to the web page using HTML and style the content using CSS. The CSS contains some pseudo-selectors, such as ‘:before’, and we can use it to add content to the web page before any HTML element.
Sometimes, developers don’t want to put the content before the HTML element using the ‘:before’ selector, but they require to position the content. For example, if we use the ‘:before’ selector to add an icon before the text, we require space between the text and the icon. So, we need to change the icon's position using the CSS position property.
In this tutorial, we will use the ‘absolute’ value for the CSS position property to change the position of the content relative to its parent element’s position.
Syntax
Users can follow the syntax below to use the position property with the ‘:before’ pseudo selector.
div:before {
content: "arrow";
position: absolute;
}
In the above syntax, we have added the content value before the div element. Also, we set the position absolute for the content, and we can change its position using the ‘left,’ ‘right,’ ‘top,’ and ‘bottom’ CSS properties.
Example 1
In the example below, we have created the list of items. In CSS, we have set list style equal to none and position relative. After that, we used the ‘:before’ pseudo selector to add the right icon before every list item. Also, we set the position absolute and set ‘-50px’ for the value of the ‘left’ CSS property.
Users can change the value of the ‘left’ property and observe the space between the right icon and the list item.
<html>
<head>
<style>
li {
list-style-type: none;
position: relative;
}
li:before {
content: "\2713";
position: absolute;
left: -50px;
}
</style>
</head>
<body>
<h3> Adding the <i> list icons using the :before pseudo selector </i> and changing its position </h3>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
<li> Fourth </li>
<li> Fiveth </li>
</ul>
</body>
</html>
Example 2
In the example below, we have added the notification icon to the web page using the ‘img’ element. However, we have added the ‘img’ element inside the ‘span’ element.
Also, we have set the ‘relative’ position for the span element. We have used the ‘:before’ pseudo selector to add the notification count on top of the notification icon. We have set the ‘absolute’ position for the notification count content and set the left and top positions in such a way so that it looks nice.
<html>
<head>
<style>
span {position: relative;}
span:before {
content: "5 NEW";
position: absolute;
font-size: 15px;
font-weight: bold;
color: white;
background-color: red;
padding: 3px 8px;
border-radius: 8px;
top: -90px;
left: 10px;
}
</style>
</head>
<body>
<h3> Adding the <i> Notification count on the notification icon </i> and changing its position </h3>
<span> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRFgdEuNyjtHG97YATZHnBXUebNtbHXCDV0pPy8is&s" alt = "Notification"> </span>
</body>
</html>
Example 3
In the example below, we have demonstrated using the ‘:before’ pseudo selector to create a tooltip.
Here, we have added the half file name as a label of the ‘<a>’ tag and the full file name as a value of the ‘title’ attribute. In CSS, we have used the attr() function to access the attribute value which we have used as content.
After that, we set the absolute position for the tooltip content and used the transform CSS property to set its position on top of the actual content. In the output, when users hover over the file name, it shows the full file name in the tooltip.
<html>
<head>
<style>
a:hover:before {
content: attr(title);
position: absolute;
white-space: nowrap;
transform: translate(0%, -100%);
opacity: 0;
transition: all 0.3s ease-in-out;
background-color: aqua;
color: black;
padding: 5px;
border-radius: 5px;
}
a:hover:before {opacity: 1;}
</style>
</head>
<body>
<h3> Creating the tooltip by adding content before the HTML element </h3>
<a href = "#" title = "First_File_1.jpg"> First_Fi... </a> <br><br>
<a href = "#" title = "Second_File_2.jpg"> Second_F...</a> <br><br>
<a href = "#" title = "Third_File_3.jpg"> Third_Fil... </a>
</body>
</html>
Example 4
In the example below, we have demonstrated to create a custom checkbox using the ‘:before’ pseudo selector.
First, we have set ‘display: none’ for the checkbox to hide the default checkbox. After that, we added the content before the label and gave dimensions and some CSS to style the checkbox. Next, we added CSS to show the arrow icon inside the checked checkbox. Here, we have used the relative position to set the checkbox position.
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid red;
border-radius: 6px;
margin-right: 12px;
position: relative;
top: 3px;
}
input[type="checkbox"]:checked+label:before {
content: "\2713";
font-size: 11px;
text-align: center;
color: white;
background-color: green;
}
</style>
</head>
<body>
<h3> Creating the custom checkbox using the :before pseudo selector </h3>
<input type = "checkbox" id = "car">
<label for = "car"> Car </label> <br> <br>
<input type = "checkbox" id = "Bike">
<label for = "Bike"> Bike </label>
</body>
</html>
Users learned to use the position CSS property with the ‘:before’ pseudo-element. In the first example, we have added the custom icon for list items. In the second example, we learned to set notification count. The third example taught us to create a tooltip using the ‘:before’ pseudo selector and position property. In the final example, we learned to create a custom checkbox.
368 Views
To Continue Learning Please Login