+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Pseudo-elements in CSS3 (/showthread.php?tid=5174)
Pseudo-elements in CSS3 - Qomplainerz - 07-26-2023
Example:
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-elements Example</title>
<style>
/* Add a custom "before" content to the paragraph */
p::before {
content: "Before text: ";
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the main text of the paragraph.</p>
</body>
</html>
Explanation:
Pseudo-elements allow you to style specific parts of an element, such as the content before or after the element's content. In this example, the p::before pseudo-element inserts the specified content ("Before text: ") before the content of the p element and applies bold font-weight to it.