CSS Pseudo-elements
Cascading Style Sheets, also known as CSS, is a front-end style sheet language used to make cool looking websites written in a markup language such as HTML. CSS lets us control the look and feel of a web page.
What are Pseudo-elements?
A CSS pseudo-element is a keyword added to a selector that lets us style a specific part of the selected HTML element(s).
Pseudo-elements are different from pseudo-classes, as it is signified by two colons instead of one followed by the name of pseudo-class. Since older versions of web browsers do not support a two-colon format, we can use pseudo-elements with a single-colon format.
Syntax
selector::pseudo-element {
property: value;
}
Types of Pseudo-elements
- ::after (:after)
- ::backdrop
- ::before (:before)
- ::cue
- ::cue-region
- ::first-letter (:first-letter)
- ::first-line (:first-line)
- ::file-selector-button
- ::grammar-error
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- ::spelling-error
- ::target-text
There are some elements that are considered to be experimental, we can read about it here.
Let's see how to use these pseudo-elements with HTML. We will use ::after and ::before elements to see the effects.
Copy the code below into the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<p class="one">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae dolor a quaerat! Natus quia mollitia quae itaque illum adipisci dolor, nesciunt nulla, vel exercitationem debitis voluptas officiis dignissimos sapiente architecto.</p>
<p class="two">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore temporibus dolorum commodi asperiores dignissimos tenetur architecto maiores cumque ex ad obcaecati cupiditate, vitae natus, quaerat voluptates porro. Aspernatur, illo id.</p>
</body>
</html>
::after (:after)
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with content: property. It is inline by default.
Copy the code below into the styles.css file:
.one::after {
content: " @-@ ";
color: #2563EB;
font-size: 1.5rem;
}
.two::after {
content: " @-@ ";
color: #DB2777;
font-size: 1.5rem;
}
Output:
::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with content: property. It is inline by default.
Copy the code below into the styles.css file:
.one::before {
content: " @-@ ";
color: #2563EB;
font-size: 1.5rem;
}
.two::before {
content: " @-@ ";
color: #DB2777;
font-size: 1.5rem;
}
Output:
