5.1 Main Pseudo-elements
Pseudo-elements in CSS let developers add styles and content to parts of the document that can't be targeted by regular selectors. They create "virtual" elements that can be styled as if they were part of the HTML markup. It's a powerful tool for crafting complex layouts and improving the look of web pages.
What are pseudo-elements
Pseudo-elements are keywords added to selectors that let you style specific parts of elements. They create virtual elements that become part of the visual presentation but don't change the original HTML markup. Pseudo-elements are typically used for styling first letters, lines of text, adding decorative elements, and other tasks.
Main Pseudo-elements
Some of the most commonly used pseudo-elements include:
::before: adds content before the content of the selected element::after: adds content after the content of the selected element::first-letter: styles the first letter of the element::first-line: styles the first line of the element::selection: styles text selected by the user
How to use pseudo-elements
Pseudo-elements in CSS are denoted by double colons (::), although some pseudo-elements can also support the older single-colon notation (:) for backward compatibility.
Syntax:
selector::pseudo-element {
property: value;
property: value;
property: value;
...
}
5.2 Examples of using pseudo-elements
1. Adding Decorative Elements
Pseudo-elements are often used to add decorative elements before or after the content of an element:
/* Adding an icon before link text */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Adding a decorative element after a paragraph */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
In these examples, the pseudo-elements ::before and ::after are used to add an icon before the link text and a decorative element after a paragraph, respectively.
2. Styling First Letters and Lines
Pseudo-elements can be used to style first letters or first lines of text, which is often applied in typography:
/* Styling the first letter of a paragraph */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #3498db;
}
/* Styling the first line of a paragraph */
p::first-line {
font-weight: bold;
color: #e74c3c;
}
In these examples, pseudo-elements ::first-letter and ::first-line are used to style the first letter and first line of a paragraph.
3. Text Selection
The pseudo-element ::selection is used to style text that is selected by the user:
/* Styling selected text */
::selection {
background-color: #3498db;
color: white;
}
In this example, text selected by the user will have a blue background and white text color.
5.3 Features and Limitations of Pseudo-elements
Limitations:
- Single Usage: Pseudo-elements
::beforeand::aftercan be used only once per element - Content Requirement: Pseudo-elements
::beforeand::afterrequire the use of the content property, even if it's empty - Browser Compatibility: Modern browsers support double colon notation for pseudo-elements, but older pseudo-elements still work with the single colon
Example of Using the Content Property
/* Example of using an empty pseudo-element for a decorative element */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
}
In this example, an empty pseudo-element ::before is used to add a decorative stripe before the div content.
GO TO FULL VERSION