Pseudo-elements in CSS

What are pseudo-elements?

A pseudo-element is a keyword that you can add to a selector in CSS to style a specific part of an element's content, without adding extra HTML elements. For example, you can use a pseudo-element to style the first letter or line of a paragraph, or to insert some content before or after an element.

Pseudo-elements are different from pseudo-classes, which target an element based on its state or interaction with the user. Pseudo-elements target a part of an element, such as the content, the first line, the first letter, or the generated content.

How to use pseudo-elements?

The syntax of pseudo-elements is:

                        
selector::pseudo-element {

  property: value;

}

                        
                    

The selector can be any valid CSS selector, such as an element, a class, an id, an attribute, or a combination of them. The pseudo-element is preceded by two colons (::), and followed by the name of the pseudo-element. For example, the pseudo-element ::first-letter` can be used to style the first letter of an element.

Some pseudo-elements can also take arguments inside parentheses, such as ::part(name)`, which selects a part of a shadow DOM tree that has a name attribute matching the argument.

Examples of pseudo-elements

There are many pseudo-elements in CSS, and they can be grouped into different categories based on their functionality. Here are some common examples of pseudo-elements, and how they can be used to style elements.

Content pseudo-elements

These pseudo-elements select and style a specific part of an element's content, such as the first line, the first letter, or the selection.

::first-line: Selects the first formatted line of an element. For example, you can change the color and font of the first line of a paragraph:

                        
p::first-line {

  color: blue;

  font-family: Arial, sans-serif;

}

                        
                    

::first-letter: Selects the first letter of an element. For example, you can change the size and style of the first letter of a heading:

                        
h1::first-letter {

  font-size: 3em;

  font-style: italic;

}

                        
                    

::selection: Selects the portion of an element that is selected by the user. For example, you can change the background color and text color of the selected text:

                        
::selection {

  background-color: yellow;

  color: black;

}

                        
                    

Generated content pseudo-elements

These pseudo-elements select and style the content that is generated by the CSS `content` property, which can be used to insert some content before or after an element.

::before: Selects the content that is inserted before an element. For example, you can insert a quotation mark before a blockquote:

                        
blockquote::before {

  content: open-quote;

  font-size: 4em;

  color: gray;

}

                        
                    

::after: Selects the content that is inserted after an element. For example, you can insert a citation after a blockquote:

                        
blockquote::after {

  content: " - " attr(cite);

  font-style: italic;

  color: gray;

}

                        
                    

Shadow DOM pseudo-elements

These pseudo-elements select and style a part of a shadow DOM tree, which is a hidden DOM tree that is attached to an element and provides encapsulation and isolation.

::part(name): Selects a part of a shadow DOM tree that has a `part` attribute matching the name argument. For example, you can style a custom button element that has a shadow DOM tree with a part named "button":

                        
custom-button::part(button) {

  background-color: green;

  border-radius: 10px;

}

                        
                    

::slotted(selector): Selects a slot element's assigned nodes that match the selector argument. For example, you can style a paragraph element that is assigned to a slot element with a name attribute of "content":

                        
::slotted(p[name=content]) {

  font-weight: bold;

  color: red;

}

                        
                    

Conclusion

Pseudo-elements are a powerful feature of CSS that allow you to style a specific part of an element's content, without adding extra HTML elements. Pseudo-elements can be combined with other selectors, chained, or nested to create more specific or complex selectors. Pseudo-elements can be used to create custom or decorative effects, such as adding icons, images, quotes, or shapes to an element, or changing the font or color of a part of an element.

However, pseudo-elements also have some limitations and challenges. Not all pseudo-elements are supported by all browsers, so you may need to check the browser compatibility or use fallbacks or polyfills. Pseudo-elements also have different levels of specificity, which may affect the cascade or inheritance of the styles. Pseudo-elements may also conflict or overlap with other selectors or styles, so you may need to use the cascade order, the specificity, or the `!important` declaration to resolve them.

Here are some tips or best practices for using pseudo-elements in CSS:

• Use the correct syntax and format of pseudo-elements, and make sure they are preceded by two colons (::).
• Use the most appropriate pseudo-element for your purpose, and avoid using unnecessary or redundant pseudo-elements.
• Use pseudo-elements sparingly and wisely, and avoid overusing or abusing them.
• Test your pseudo-elements on different browsers and devices, and check the browser compatibility or use fallbacks or polyfills if needed.
• Use the cascade order, the specificity, or the `!important` declaration to resolve any conflicts or overlaps with other selectors or styles.