Mastering CSS Pseudo-elements: Enhance HTML Elements with Examples
Pseudo-elements in CSS allow you to style specific parts of an HTML element without adding extra markup to your HTML. They are indicated using double colons (::) followed by a keyword that represents the part of the element you want to style. Two common pseudo-elements are `::before` and `::after`.
1. **::before Pseudo-element**:
The `::before` pseudo-element is used to insert content before the content of an HTML element. It is often used for decorative elements or icons. You can define the content to be inserted using the `content` property in your CSS. For example, you can use it to add a bullet point before a paragraph like this:
```css
p::before {
content: "\2022"; /* Unicode code for a bullet point */
color: red;
margin-right: 5px;
}
```
2. **::after Pseudo-element**:
The `::after` pseudo-element is used to insert content after the content of an HTML element. It's commonly used for adding additional information or decorative elements. You define the content to be inserted using the `content` property. For instance, you can add an exclamation mark after links like this:
```css
a::after {
content: " !";
}
```
Pseudo-elements are a powerful tool for enhancing the appearance and functionality of your web designs without cluttering your HTML with extra elements. They allow you to apply styles selectively to parts of an element, improving the overall presentation of your web content.
See the code 👇🧑🏻💻: