CSS Pseudo-elements

Welcome to The Coding College! In this tutorial, we’ll explore CSS pseudo-elements, a tool that lets you style specific parts of elements or inject additional content without altering the HTML structure.

Pseudo-elements are an essential part of CSS, allowing developers to design with precision and flexibility.

What Are CSS Pseudo-elements?

A pseudo-element is a keyword added to a selector that allows you to style specific parts of an element, such as the first line of text, the first letter, or even insert content before or after an element.

Syntax:

selector::pseudo-element {
    property: value;
}

Example:

p::first-line {
    font-weight: bold;
}

Explanation: The ::first-line pseudo-element styles the first line of text in a paragraph.

Commonly Used CSS Pseudo-elements

Here’s a list of commonly used pseudo-elements in CSS:

1. ::before
2. ::after
3. ::first-line
4. ::first-letter
5. ::selection
6. ::marker
7. ::placeholder

1. ::before

The ::before pseudo-element inserts content before an element.

Example:

<p>Welcome to The Coding College!</p>

p::before {
    content: "🌟 ";
    font-size: 1.5em;
}

Output:
The paragraph starts with a star icon (🌟).

2. ::after

The ::after pseudo-element inserts content after an element.

Example:

<p>Start your coding journey.</p>

p::after {
    content: " 🚀";
    font-size: 1.5em;
}

Output:
The paragraph ends with a rocket emoji (🚀).

3. ::first-line

The ::first-line pseudo-element applies styles to the first line of text in an element.

Example:

<p>This is an example paragraph with multiple lines of text to demonstrate the first-line pseudo-element.</p>

p::first-line {
    font-weight: bold;
    color: blue;
}

Output:
Only the first line of the paragraph is bold and blue.

4. ::first-letter

The ::first-letter pseudo-element applies styles to the first letter of the first line of an element.

Example:

<p>Welcome to CSS tutorials!</p>

p::first-letter {
    font-size: 2em;
    color: red;
}

Output:
The first letter (W) is styled with a larger font size and red color.

5. ::selection

The ::selection pseudo-element styles the portion of the element that is selected by the user (e.g., highlighted with the mouse).

Example:

<p>Select this text to see the styling effect.</p>

p::selection {
    background-color: yellow;
    color: black;
}

Output:
When the text is selected, it has a yellow background with black text.

6. ::marker

The ::marker pseudo-element styles the markers of list items, such as bullets or numbers.

Example:

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

li::marker {
    color: green;
    font-size: 1.2em;
}

Output:
The bullets or numbers for the list items are green and larger.

7. ::placeholder

The ::placeholder pseudo-element styles the placeholder text inside input fields.

Example:

<input type="text" placeholder="Enter your name" />

input::placeholder {
    font-style: italic;
    color: gray;
}

Output:
The placeholder text is italicized and gray.

Combining Pseudo-elements

You can combine pseudo-elements with pseudo-classes for advanced styling.

Example:

<p class="intro">Welcome to advanced CSS tutorials!</p>

p.intro:hover::first-letter {
    font-size: 3em;
    color: orange;
}

Explanation: The first letter of the paragraph becomes larger and orange when hovered over.

Practical Use Cases of Pseudo-elements

• Adding Icons or Decorative Elements: Use ::before and ::after to insert non-intrusive content like icons.
• Improving Readability: Use ::first-line or ::first-letter to emphasize key parts of text.
• Customizing Inputs: Style placeholders to improve form aesthetics.
• Highlighting Interactivity: Use ::selection for engaging user interactions.

Limitations of Pseudo-elements

• Limited to predefined pseudo-elements (e.g., no custom names).
• Cannot dynamically interact with JavaScript like real HTML elements.
• Some pseudo-elements have limited browser support (e.g., ::marker).

Summary Table

Conclusion

CSS pseudo-elements are invaluable for styling specific parts of your content or adding decorative elements without extra HTML. They enable you to create clean, maintainable, and visually appealing designs.

For more tutorials on CSS and web development, check out The Coding College!

Happy coding and exploring CSS pseudo-elements!