CSS ::before Pseudo-element
Creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Example: This example uses ::before selector to style the first child of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>before Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::before {
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::before element</h2>
<p>
This is a paragraph to which
we added red color quotation
marks using ::before element.
</p>
</body>
</html>
Output:
CSS Pseudo Elements
CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.
Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax:
selector::pseudo-element {
property: value;
}
There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
Table of Content
- ::first-line Pseudo-element
- ::first-letter Pseudo-element
- ::before Pseudo-element
- ::after Pseudo-element
- ::marker Pseudo-element
- ::selection Pseudo-element