CSS Properties: How to set the content property to its default value?

Last update on February 21 2024 12:45:44 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the content property to its default value</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before { 
content: "Learn -"; /* Sets the content of the pseudo-element ::before of all <p> elements to "Learn -" */
}
p#w3r:before { 
content: initial; /* Sets the content of the pseudo-element ::before of <p> elements with the ID "w3r" to its default value */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<p class="w3r">w3resource web development Tutorial</p><!-- Inserts a paragraph element with the specified content and class -->
<p>CSS3 Tutorial</p><!-- Inserts a paragraph element with the specified content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the content property in CSS to set the content of a pseudo-element.
The CSS rule p:before targets the pseudo-element ::before of all <p> elements and sets its content to "Learn -".
The CSS rule p#w3r:before targets the pseudo-element ::before of <p> elements with the ID "w3r" and sets its content to its default value using content: initial;.

Live Demo:

See the Pen content-initial-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page