Pseudo-elements are keywords added to selectors that allow you to style specific parts of an element or insert content before or after an element. Unlike pseudo-classes, which style elements based on their state, pseudo-elements target and style specific portions of an element’s content.
The syntax for pseudo-elements uses a double colon (::) notation, introduced in CSS3 to distinguish them from pseudo-classes. For backward compatibility with CSS1 and CSS2, a single colon (:) notation is also valid for pseudo-elements.
selector::pseudo-element {
property: value;
}
Description: Targets the first letter of the text within an element. Useful for creating drop caps or special styling for the first letter of a block of text.
p::first-letter {
font-size: 2em;
color: red;
}
Description: Styles the first line of text within an element. Ideal for applying unique styles to the opening line of paragraphs.
p::first-line {
font-weight: bold;
color: blue;
}
Description: Inserts content before the element’s actual content. Commonly used for decorative purposes or to add additional symbols or text.
.example::before {
content: "Note: ";
font-weight: bold;
color: green;
}
Description: Inserts content after the element’s actual content. Useful for adding icons, quotation marks, or other supplementary content.
.quote::after {
content: '"';
font-size: 2em;
color: gray;
}
Description: Styles the portion of an element that the user has highlighted or selected. Allows customization of the text selection color and background.
::selection {
background: yellow;
color: black;
}
Here’s a comprehensive example that combines several CSS pseudo-elements and pseudo-classes to create a styled HTML document. This example demonstrates the use of ::first-letter, ::first-line, ::before, ::after, ::selection, and a few pseudo-classes like :hover and :focus.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-Elements and Pseudo-Classes Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
/* Pseudo-Class: :hover */
.hover-effect:hover {
color: red;
font-size: 1.5em;
}
/* Pseudo-Class: :focus */
input:focus {
border: 2px solid blue;
outline: none;
}
/* Pseudo-Element: ::first-letter */
p::first-letter {
font-size: 3em;
font-weight: bold;
color: #ff4500;
}
/* Pseudo-Element: ::first-line */
p::first-line {
font-weight: bold;
color: #4CAF50;
}
/* Pseudo-Element: ::before */
.before-content::before {
content: "Note: ";
color: orange;
font-weight: bold;
}
/* Pseudo-Element: ::after */
.after-content::after {
content: " — Learn more!";
color: blue;
font-style: italic;
}
/* Pseudo-Element: ::selection */
::selection {
background: #ffeb3b;
color: black;
}
/* Styling for the whole example */
.example-container {
margin: 20px auto;
padding: 20px;
max-width: 600px;
border: 1px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="example-container">
<h1 class="hover-effect">Hover over this heading</h1>
<p>This paragraph demonstrates the use of pseudo-elements and pseudo-classes. The <span class="before-content">content before this text</span> is styled with ::before, and this text is styled with ::after<span class="after-content"></span>.</p>
<input type="text" placeholder="Focus on this input field" />
</div>
</body>
</html>