CSS Properties: How to set the content to the text you specified?

Go to Exercise page


HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<title>How to set the content to the text you specified</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p:before {
content: "Learn Tutorial - "; /* Inserts the specified text before the content of all <p> elements */
</style><!-- Ends the CSS style block -->
<p>w3resource - HTML5</p><!-- Inserts a paragraph element with the specified content -->
<p>w3resource - CSS3</p><!-- Inserts another paragraph element with the specified content -->


  • This HTML document demonstrates how to use the content property in CSS to specify custom text content before the content of selected elements.
  • The CSS rule p:before selects the pseudo-element ::before of all <p> elements.
  • The content: "Learn Tutorial - "; property inserts the specified text "Learn Tutorial - " before the content of each <p> element.
  • In this example, each paragraph element is preceded by the text "Learn Tutorial - ".

Live Demo:

See the Pen content-string-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.