CSS pseudo-elements are special keywords added to selectors that allow you to style specific parts of an element or insert content before or after the actual content of an element. They are incredibly useful for adding cosmetic content to your web pages without altering the HTML structure. In this guide, we will explore the various CSS pseudo-elements and demonstrate how to use them effectively.
What are CSS Pseudo-elements?
A pseudo-element is a keyword added to a selector that allows you to style a specific part of an element. Unlike pseudo-classes, which target elements based on their state or position, pseudo-elements enable you to style subparts of elements or insert additional content.
Common CSS Pseudo-elements:
- ::before
- ::after
- ::first-line
- ::first-letter
- ::selection
- ::placeholder
- ::marker
- ::backdrop
::before:
The ::before pseudo-element inserts content before the content of the selected element.
CSS Example:
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}HTML Example:
<p>This is a paragraph.</p>Result:
Note: This is a paragraph.In this example, the text “Note: ” is inserted before the content of the paragraph, styled with bold and red color.
::after:
The ::after pseudo-element inserts content after the content of the selected element.
CSS Example:
p::after {
content: " Read more.";
color: blue;
}HTML Example:
<p>This is a paragraph.</p>This is a paragraph. Read more.In this example, the text ” Read more.” is inserted after the content of the paragraph, styled with blue color.
::first-line:
The ::first-line pseudo-element applies styles to the first line of the content of a block-level element.
CSS Example:
p::first-line {
font-weight: bold;
color: green;
}HTML Example:
<p>This is a long paragraph that spans multiple lines. The first line will be styled differently.</p>Result:
The first line of the paragraph will be bold and green.
::first-letter:
The ::first-letter pseudo-element applies styles to the first letter of the content of a block-level element.
CSS Example:
p::first-letter {
font-size: 2em;
color: purple;
}HTML Example:
<p>This is a paragraph. The first letter will be styled differently.</p>Result:
The first letter of the paragraph will be twice as large as the rest and colored purple.
::selection:
The ::selection pseudo-element applies styles to the portion of an element that is selected by the user.
CSS Example:
::selection {
background: yellow;
color: black;
}HTML Example:
<p>Select some of this text to see the custom selection style.</p>Result:
The selected text will have a yellow background and black color.
::placeholder:
The ::placeholder pseudo-element applies styles to the placeholder text of an input element.
CSS Example:
input::placeholder {
color: grey;
font-style: italic;
}HTML Example:
<input type="text" placeholder="Enter your name">Result:
The placeholder text “Enter your name” will be grey and italic.
::marker:
The ::marker pseudo-element styles the marker of a list item.
CSS Example:
li::marker {
color: red;
font-size: 1.5em;
}HTML Example:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>Result:
The list markers (bullets or numbers) will be red and larger in size.
::backdrop:
The ::backdrop pseudo-element styles the background of a fullscreen element.
CSS Example:
::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}HTML Example:
<!-- When a fullscreen element is present, such as in a fullscreen video player -->Result:
The background of the fullscreen element will have a semi-transparent black overlay.
Conclusion:
CSS pseudo-elements provide a powerful way to enhance your web designs by targeting specific parts of elements or adding extra content without modifying the HTML structure. By mastering pseudo-elements like ::before, ::after, ::first-line, ::first-letter, ::selection, ::placeholder, ::marker, and ::backdrop, you can create more dynamic and visually appealing web pages. Experiment with these pseudo-elements to take your CSS skills to the next level and deliver more engaging user experiences.