Pseudo-elements have a number of additional features for selecting elements of a web page and are similar to pseudo-classes. List of available pseudo-elements:
- ::first-letter : allows you to select the first letter from the text
- ::first-line : styles the first line of text
- ::before : adds a message before a specific element
- ::after : adds a message after a specific element
- ::selection : selects the elements selected by the user
In CSS2, pseudo-elements, like pseudo-classes, were preceded by a single colon. In CSS3, to distinguish them from pseudo-classes, pseudo-elements began to be preceded by two colons. However, for compatibility with older browsers that do not support CSS3, a single colon is acceptable: :before.
Styling the text using pseudo -elements first-letter and first-line:
<!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>Pseudo-classes in CSS3</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus sit amet augue quis luctus. Sed
ornare pellentesque libero, et convallis augue. Nam sed arcu dolor. Donec sodales congue posuere. Ut ultricies
sodales enim, eget consequat libero placerat dictum. Maecenas tempus nunc est, nec iaculis diam pretium nec.
Suspendisse potenti.
</p>
</body>
</html>
We use pseudo -elements before and after:
<!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>Pseudo-classes in CSS3</title>
</head>
<body>
<p><span class="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus sit amet augue quis
luctus. </span></p>
</body>
</html>
Here the pseudo-elements are applied to the element with the class warning. Both pseudo-elements accept a content property that stores the text to insert. And also to increase attention, pseudo-elements use bold text using the font-weight: bold;.
We use a pseudo element selection to style the selected elements:
<!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>Pseudo-classes in CSS3</title>
</head>
<body>
<p>Pseudo-elements in CSS3 allow you to format text. </p>
</body>
</html>
