A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. Unlike the pseudo-classes, the pseudo-elements are used to style the specific part of an element, whereas the pseudo-classes are used to style the element.
As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.
Syntax
A pseudo-element features a straightforward syntax outlined below:
selector::pseudo-element {
property: value;
}
We have employed the double colon syntax (::pseudo-element) in our code. In CSS3, the double colon was introduced to replace the single colon syntax for pseudo-elements. This change was implemented by W3C to clearly distinguish between pseudo-elements and pseudo-classes. Therefore, it is advisable to utilize the double colon syntax (::pseudo-element) over the single colon notation (:) for better clarity and adherence to current standards.
In CSS1 and CSS2, a solitary colon (:) syntax is employed for both pseudo-elements and pseudo-classes. This syntax remains valid for pseudo-elements in CSS1 and CSS2 to ensure backward compatibility.
Even though CSS offers numerous pseudo-elements, we will focus on some of the most popular ones. Below is a table listing the commonly utilized CSS pseudo-elements:
| pseudo-element | Description |
|---|---|
| ::first-letter (:first-letter) | It selects the first letter of the text. |
| ::first-line (:first-line) | It styles the first line of the text. |
| ::before (:before) | It is used to add something before the element's content. |
| ::after (:after) | It is used to add something after the element's content. |
| ::selection | It is used to select the area of an element that is selected by the user. |
Let's discuss the above pseudo-elements, along with an example.
The ::first-letter pseudo-element
As its name implies, it affects the first letter of the text. It can be applied only to block-level elements. Instead of supporting all CSS properties, it supports some of the CSS properties that are given below.
- Color properties (such as color)
- Font properties (such as font-style, font-family, font-size, font-color, and many more) .
- Margin properties (such as margin-top, margin-right, margin-bottom, and margin-left) .
- Border properties (like border-top, border-right, border-bottom, border-left, border-color, border-width, and many more) .
- Padding properties (such as padding-top, padding-right, padding-bottom, and padding-left) .
- Background properties (such as background-color, background-repeat, background-image, and background-position) .
- Text related properties (such as text-shadow, text-transform, text-decoration, etc.) .
- Other properties are vertical-align (only when the float is ' none ') word-spacing, line-height, line-spacing, etc.
Example
<html>
<head>
<style>
body{
text-align: center;
}
h1::first-letter {
font-family: Lucida Calligraphy;
font-size: 3cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1> Welcome to the e.com </h1>
<h2> This is an example of ::first-letter pseudo-element. </h2>
</body>
</html>
Output
The ::first-line pseudo-element
It is similar to the ::first-letter pseudo-element, but it affects the entire line. It adds the special effects to the first line of the text. It supports the following CSS properties:
- Color properties (such as color)
- Font properties (such as font-style, font-family, font-size, font-color, and many more) .
- Background properties (such as background-color, background-repeat, background-image, and background-position) .
- Other properties are word-spacing, letter-spacing, line-height, vertical-align, text-transform, text-decoration.
Example
In this instance, we will explore the application of the ::first-line pseudo-element to incorporate unique styles to the initial line of the element.
<html>
<head>
<style>
body{
text-align: center;
}
h1::first-line {
font-family: Lucida Calligraphy;
font-size: 1cm;
color: red;
text-shadow: 5px 8px 9px green;
}
</style>
</head>
<body>
<h1> Welcome to the e.com. This site is developed so that students may learn computer science related technologies easily. The e.com is committed to provide easy and in-depth tutorials on various technologies. </h1>
<h2> This is an example of ::first-line pseudo-element. </h2>
</body>
</html>
Output
The ::before pseudo-element
It enables the addition of content preceding the element's existing content. This feature is commonly employed to insert content before a particular section within an element, often in conjunction with the content property.
We have the option to include standard text or images preceding the content by leveraging this pseudo-element.
Example
<html>
<head>
<style>
body{
text-align: center;
}
h1::before {
content: "'Hello World.'";
color: red;
}
</style>
</head>
<body>
<h1>Welcome to the e.com. </h1>
<h2> This is an example of ::before pseudo-element. </h2>
<h3> In the first line the "Hello World" has added by using the pseudo-element ::before </h3>
</body>
</html>
Output
The ::after pseudo-element
It functions in a comparable manner to the ::before pseudo-element, however, it inserts the content following the element's content. This feature is employed to append content after a particular section of an element and is commonly utilized in conjunction with the content property.
It also enables us to include plain text or images following the content.
Example
<html>
<head>
<style>
body{
text-align: center;
}
h1::after {
content: "'Welcome to the e.com.'";
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> This is an example of ::after pseudo-element. </h2>
<h3> In the first line the "Welcome to the e.com." has added by using the pseudo-element ::after </h3>
</body>
</html>
Output
The ::selection pseudo-element
It is used to style the part of an element that is selected by the user. We can use the following CSS properties with it:
- color.
- background-color.
- Other properties include cursor, outline, etc.
Example
<html>
<head>
<style>
body{
text-align: center;
}
h1::selection {
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> Select the text in first line to see the effect. </h2>
<h3> This is an example of ::selection pseudo-element. </h3>
</body>
</html>
Output
CSS classes and pseudo-element
Combining CSS classes with pseudo-elements allows for styling a particular element with that class. Below is the syntax for combining CSS classes with pseudo-elements.
Syntax
It can be written as:
selector.class::pseudo-element {
property: value
}
Example
This illustration demonstrates how the initial character of specific <h1> components with the class "example" will be impacted, as opposed to affecting all the <h1> elements universally.
<html>
<head>
<style>
body{
text-align: center;
}
h1.example::first-letter {
color: red;
font-size: 2cm;
font-family: Lucida Calligraphy;
}
</style>
</head>
<body>
<h1 class="example"> Hello World. </h1>
<h1> Welcome to the e.com. </h1>
<h3> This is an example of pseudo-element with CSS classes.</h3>
</body>
</html>
Output