CSS Properties: How to set the content, if specified, to nothing?

Last update on February 21 2024 12:45:49 (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, if specified, to nothing</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before { 
    content: "Learn - "; /* Adds content before every <p> element */
}
p#w3r:before { 
    content: none; /* Sets the content before the <p> element with id="w3r" to nothing */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Inserts a paragraph element with strong emphasis -->
<p id="w3r">A good web development tutorial.</p><!-- Inserts a paragraph element with id="w3r" -->
</body>
</html>

Explanation:

This HTML document demonstrates the use of the content property in CSS with the ::before pseudo-element selector.
The CSS rule p:before selects every <p> element and inserts content before it.
The content: "Learn - "; property inserts the text "Learn - " before each <p> element.
The CSS rule p#w3r:before targets the <p> element with the id "w3r".
The content: none; property sets the content before the <p> element with id "w3r" to nothing, effectively removing any content added before it.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page