CSS Pseudo Elements

By: Rajesh P.S.

Pseudo-elements are powerful tools in CSS that allow you to target and style specific parts of an element without adding actual markup. They differ from pseudo-classes, which target elements based on their state or context.

Syntax:

Pseudo-elements are appended to existing selectors using double colons (::). Here's the basic syntax:

selector ::pseudo-element { /* styles for the pseudo-element */ }

Here are some commonly used CSS pseudo-elements along with explanations and examples:

::before

Continue Reading...

The ::before pseudo-element inserts content before the content of the selected element. It is often used to add decorative elements or icons before an element's content. For instance, consider a scenario where you want to prepend a decorative arrow before each list item to provide visual emphasis. By utilizing the ::before pseudo-element, you can achieve this without altering the HTML structure. This flexibility allows for the separation of content and presentation, promoting cleaner code and easier maintenance.

.box::before { content: "Before"; color: red; } <div class="box">Content</div>

::after

The ::after pseudo-element inserts content after the content of the selected element. This is particularly useful for adding decorative elements or icons after an element's content. By utilizing ::after, you can enhance the visual appearance of your web page without altering the underlying HTML structure. This approach promotes cleaner code and facilitates easier maintenance, as it separates content from presentation. The ::after pseudo-element operates in much the same way as ::before, allowing you to specify the content to be inserted and apply styling properties to customize its appearance.

.box::after { content: "After"; color: blue; } <div class="box">Content</div>

::first-line

The ::first-line pseudo-element targets the initial line of text within an element, enabling tailored styling for that line exclusively. This feature grants designers precise control over typographic presentation, facilitating adjustments such as font size, weight, or color solely for the first line, enhancing readability and visual hierarchy in textual content.

p::first-line { font-weight: bold; font-size: 120%; } <p>This is a paragraph with multiple lines. Only the first line will be styled.</p>

::first-letter:

The ::first-letter pseudo-element focuses on the initial letter of text within an element, allowing designers to apply distinctive styling exclusively to that letter. This feature is particularly handy for creating visually appealing effects at the beginning of paragraphs or headings, enhancing their prominence and aesthetic appeal without affecting the rest of the content.

p::first-letter { font-size: 150%; color: red; } <p>This is a paragraph. The first letter will be styled differently.</p>

::selection

The ::selection pseudo-element targets text segments highlighted by users, providing the ability to customize their appearance. This feature empowers designers to enhance the visual feedback users receive when selecting text, such as adjusting background color or text color. It enhances user experience and adds aesthetic appeal to the selection process.

::selection { background-color: yellow; color: black; } <p>Select this text to see the styling.</p>

The ::placeholder pseudo-element enables styling of placeholder text within input or textarea elements. It serves as a valuable tool for providing visual cues or instructions to users, enhancing user experience by maintaining consistency and reinforcing branding elements. This feature ensures that placeholder text aligns with the overall design aesthetics and communicates information effectively.

input::placeholder { color: #ccc; font-style: italic; }

::backdrop (experimental)

Style the backdrop behind a modal or dropdown (not widely supported yet).

Full Source Example

HTML File (index.html):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Pseudo-elements Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="box"> Content </div> <p>This is a paragraph with multiple lines. Only the first line will be styled.</p> <p>This is another paragraph. The first letter of this paragraph will be styled differently.</p> <p>Select this text to see the styling.</p> </body> </html>

CSS File (styles.css):

/* Style for ::before pseudo-element */ .box::before { content: "Before"; color: red; } /* Style for ::after pseudo-element */ .box::after { content: "After"; color: blue; } /* Style for ::first-line pseudo-element */ p::first-line { font-weight: bold; font-size: 120%; } /* Style for ::first-letter pseudo-element */ p::first-letter { font-size: 150%; color: red; } /* Style for ::selection pseudo-element */ ::selection { background-color: yellow; color: black; }

Browser View

Content

This is a paragraph with multiple lines. Only the first line will be styled.

This is another paragraph. The first letter of this paragraph will be styled differently.

Select this text to see the styling.

Pseudo-elements in CSS do not generate real HTML elements, thus making it impossible to target their children directly. It's essential to note that certain pseudo-elements may be browser-specific or have limited support across different platforms. Employing feature detection techniques can help ensure compatibility across browsers. Additionally, it's crucial to prioritize accessibility considerations when using pseudo-elements to guarantee that all users can effectively perceive and interact with your content.

Conclusion

Pseudo-elements in CSS allow styling specific parts of an element's content or layout without modifying the HTML structure. They provide the ability to target elements that don't exist in the document tree, such as the first line of text or the selected text, enhancing design flexibility. However, it's essential to consider browser compatibility and accessibility when using pseudo-elements to ensure a consistent and inclusive user experience.

Next > CSS Box Model

Related Topics

More Related Topics.....