CSS Pseudo-elements
CSS pseudo-elements are special selectors that allow you to style specific parts of an element, or create new elements, without adding extra HTML markup. They start with the double colon :: notation, though for backward compatibility, some pseudo-elements might still use a single colon : notation.
Pseudo-elements are typically used to apply styles to certain parts of an element’s content or to generate decorative content before or after an element. Here are some commonly used CSS pseudo-elements:
::before: This pseudo-element inserts content before the element’s content. It is often used for decorative purposes or to add icons or additional styling.::after: This pseudo-element inserts content after the element’s content. Like::before, it is commonly used for decorative purposes or to add additional styling.::first-line: This pseudo-element selects the first line of text within the element and allows you to apply specific styles to that line only.::first-letter: This pseudo-element selects the first letter of the element’s content and allows you to apply specific styles to that letter only.::selection: This pseudo-element selects the portion of the text that the user has selected. It allows you to style the selected text differently from the rest of the content.
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-element Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph with some text.</p>
</body>
</html>CSS (styles.css):
p::before {
content: "🔥 ";
color: red;
}
p::after {
content: " 🔥";
color: red;
}In this example, the CSS styles use the ::before and ::after pseudo-elements to add fire emojis before and after the content of the paragraph. This is a simple decorative effect to illustrate how pseudo-elements can be used to add additional content without modifying the actual HTML.
Pseudo-elements are powerful tools for enhancing the design and layout of a webpage. They allow you to create visually engaging elements and reduce the need for extra HTML markup. Keep in mind that not all pseudo-elements are supported in older browsers, so it’s essential to check for browser compatibility when using them.