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

Go to Exercise page


HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<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 -->
<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" -->


  • 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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.