What are Pseudo-elements?
Pseudo-elements are similar to pseudo-classes but instead of classes you can style right away, they are instead elements that you can target. Let's look at examples of these.
First Child
You can target the first child of a tag using the first-child pseudo-class. This will target the first child of the element you're targeting.
Only the first child will be styled with the background color and the others will be left alone.
Last Child
You can target the last child of a tag using the last-child pseudo-class. This will target the last child of the element you're targeting.
Only the last child will be styled with the background color and the others will be left alone.
Nth Child
You can target a specific child of a tag using the nth-child pseudo-class. Simply add a number to the end of the pseudo-class. This will target the child at the specified index.
The middle child will be styled with the background color and the others will be left alone.
First of Type
You can target the first occurrence of a tag using the first-of-type pseudo-class. This will target the first type of the element you're targeting.
Only the first child of the type will be styled with the background color and the others will be left alone.
Nth of Type
You can target a specific occurrence of a tag using the nth-of-type pseudo-class. Simply add a number to the end of the pseudo-class. This will target the element at the specified index.
Last of Type
You can target the last occurrence of a tag using the last-of-type pseudo-class. This will target the last type of the element you're targeting.
Before and After
Using the before and after pseudo-elements, you can add content before or after an element. You do this via the content property, which takes a string as a value.
<!DOCTYPE html>
<html>
<head>
<title>Before and After</title>
<style>
p:before {
content: 'Hello ';
}
p:after {
content: ' World!';
}
</style>
</head>
<body>
<p>(don't mind me!)</p>
</body>
</html>
First Letter and Line
You can style the first letter and first line of an element with the first-letter and first-line pseudo-elements.
<!DOCTYPE html>
<html>
<head>
<title>First Letter and Line</title>
<style>
p:first-letter {
font-size: 5rem;
}
p:first-line {
color: red
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
The first letter has been made huge and the entire first line has been made red!
