07-26-2023, 07:15 PM
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.
<!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.