CSS Pseudo Elements

CSS Pseudo-elements are used to add styles to specific parts of an element's content. Pseudo-elements are added to selectors with the double colon (::) notation. In this chapter, we will discuss the different types of CSS Pseudo-elements and provide some examples of how they can be used.

Types of CSS Pseudo-elements

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection

CSS Pseudo-element Examples

::before

The ::before pseudo-element allows you to insert content before the content of an element. This is often used to add decorative content such as icons or images. Here's an example:

button::before {
 content: url('icon.png');
}

In this example, an icon will be inserted before the content of every button element.

::after

The ::after pseudo-element is similar to ::before, but it allows you to insert content after the content of an element. Here's an example:

p::after {
 content: 'Read more';
 font-weight: bold;
}

In this example, the text "Read more" will be added after the content of every p element.

::first-letter

The ::first-letter pseudo-element allows you to apply styles to the first letter of the first line of text in an element. Here's an example:

p::first-letter {
 font-size: 2em;
 font-weight: bold;
}

In this example, the first letter of every p element will be larger and bolder than the rest of the text.

::first-line

The ::first-line pseudo-element allows you to apply styles to the first line of text in an element. Here's an example:

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

In this example, the first line of every p element will be bold and blue.

::selection

The ::selection pseudo-element allows you to apply styles to selected text. Here's an example:

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

In this example, any text that is selected by the user will have a yellow background and black text color.

CSS Pseudo-elements are a powerful tool for adding styles to specific parts of an element's content. By using the ::before, ::after, ::first-letter, ::first-line, and ::selection pseudo-elements, you can create interesting and unique styles for your web pages.