Categories
In CSS, pseudo-elements are used to style parts of an element's content without the need to add extra HTML markup. They allow you to apply styles to specific parts of an element, such as the first line, first letter, or generate content before or after an element's content. Pseudo-elements are denoted by a double colon (::) followed by the name of the pseudo-element.
There are several types of pseudo-elements available in CSS. Let's go through each of them with examples:
1. ::first-line pseudo-element: The ::first-line pseudo-element selects the first line of text within a block-level element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>::first-line Pseudo-element Example</title>
<style>
p::first-line {
font-weight: bold;
font-size: 1.2em;
color: blue;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in purus quis enim aliquet euismod.</p>
</body>
</html>
In this example, the ::first-line pseudo-element is applied to the p element. The first line of the paragraph will have bold font-weight, a font size of 1.2em, and a blue color.
2. ::first-letter pseudo-element: The ::first-letter pseudo-element selects the first letter of the text content within a block-level element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>::first-letter Pseudo-element Example</title>
<style>
p::first-letter {
font-size: 2em;
color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in purus quis enim aliquet euismod.</p>
</body>
</html>
In this example, the ::first-letter pseudo-element is applied to the p element. The first letter of the paragraph will have a font size of 2em and a red color.
3. ::before pseudo-element: The ::before pseudo-element generates content before the content of an element. It is often used with the content property to add decorative or informational content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>::before Pseudo-element Example</title>
<style>
p::before {
content: "Note: ";
font-style: italic;
color: gray;
}
</style>
</head>
<body>
<p>This is the main content of the paragraph.</p>
</body>
</html>
In this example, the ::before pseudo-element is applied to the p element. It generates content before the paragraph with the text "Note: " in italics and gray color.
4. ::after pseudo-element: The ::after pseudo-element generates content after the content of an element. Like ::before, it is often used with the content property.
Example:
<!DOCTYPE html>
<html>
<head>
<title>::after Pseudo-element Example</title>
<style>
p::after {
content: " - End of paragraph";
font-style: italic;
color: green;
}
</style>
</head>
<body>
<p>This is the main content of the paragraph.</p>
</body>
</html>
In this example, the ::after pseudo-element is applied to the p element. It generates content after the paragraph with the text " - End of paragraph" in italics and green color.
These are some of the most commonly used pseudo-elements in CSS. Pseudo-elements provide a way to add extra styles and content to specific parts of an element's content without modifying the HTML structure, making it a useful tool for enhancing the visual presentation of your webpages.