CSS Properties: How to set the content property to its default value?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.