# Pseudo elements
A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected HTML element. As a matter of fact pseudo element is used to work on written items inside html element.
The general syntax for CSS pseudo-elements looks like this:
```xml
selector::pseudo-element {
property: value;
}
```
There are the six main pseudo-elements in CSS.
1. ::after
2. ::before
3. ::first-letter
4. ::first-line
5. ::marker
6. ::selection
There are others, but they are still considered experimental technology. So, in this post, the focus will be on the main six pseudo-elements.
## ::after
The ::after creates a pseudo-element that represents the last child of a selected HTML element. It is used to add styling to this particular element with the CSS content property. The syntax looks something like this:
```xml
selector::after {
content: "value";
}
```
One of the example that i recently used was
#### HTML
```html
Hello
```
#### CSS
```css
h1::after{
content:"😁";
}
```
**Output**
## ::before
The ::before creates a pseudo-element that represents the first child of a selected HTML element. It is inline by default, and it is used to add styling to this particular element in collaboration with the CSS content property. The syntax looks something like this:
```xml
selector::before {
content: "value";
}
```
**HTML**
```html
Hello
```
**CSS**
```css
h1::before{
content:"😁";
}
```
**Output**
## ::first-letter
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a targeted element.The syntax looks something like this:
```xml
selector::first-letter {
content: "value";
}
```
**HTML**
```html
This is a sample paragraph for illustration purpose.
```
**CSS**
```css
p::first-letter{
font-size: 3rem;
font-weight: bold;
color: grey;
}
```
**Output**
## ::first-line
The ::first-line CSS pseudo-element applies styles to the first line of the targeted element. The syntax looks something like this:
```xml
selector::first-line {
content: "value";
}
```
**CSS**
```css
p ::first-line{
text-decoration: underline;
font-weight: bold;
font-size: 1.5rem;
}
```
**Output**
## ::marker
The ::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It is used on list items and the summary element. The syntax looks like this:
```xml
selector ::marker {
property: value;
}
```
**HTML**
```html
- Lorem ipsum dolor sit amet
- consectetur adipiscing elit
- sed do eiusmod tempor incididunt
- ut labore et dolore magna
```
**CSS**
```css
li::marker{
content:"🤯 ";
font-size: 1.5rem;
}
```
**Output**
## ::selection
The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).The syntax looks something like this:
```xml
selector::first-line {
content: "value";
}
```
**CSS**
```xml
p::selection{
color: white;
background-color: #BF3325;
}
```
**Output**