CSS ::after Pseudo-element
Creates a pseudo-element that is the last 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 ::after selector to style the last child of element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>after Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::after {
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::after element</h2>
<p>
This is a paragraph to which
we added red color quotation
marks using ::after 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
Contact Us