CSS content property is used to generate content in an element. It can only be used with the pseudo elements :after and :before.

.cnt_ex1:before {
 content: '~> ';
 color: #0000d0;

.cnt_ex1:after {
 content: ' <~';
 color: #0000d0;

<h4>Example CSS content</h4>

<div class='cnt_ex1'>CoursesWeb.net</div>
<div class='cnt_ex1'>MarPlo.net</div>
<div class='cnt_ex1'>GamV.eu</div>

The <style> element from these examples must be added in the <head> section of the page.

CSS content Values

Other examples with content property

Change list-item marker

- The following example displays this symbol ( ยป ) as list-item marker in <ul> elements with class of 'li_mark1':
ul.li_mark1 { list-style: none; }
ul.li_mark1 li:before {
 content: '\00BB'; /* Escaped Hex code notation */
 padding-right: 8px;

<h4>Example set list-item marker</h4>

<ul class='li_mark1'>
 <li>Free Courses and Tutorials</li>
 <li>HTML-CSS examples</li>
 <li>Today is a good day for 'Doing' Nothing</li>

New line in css content

To add a text in "content" property that contains new lines, add in string: \a for linebreak character, and white-space: pre;.
#cnt_ex4:after {
 content: '- Text from content \a Another line.';
 white-space: pre;

<h4>Example CSS content with lines of text</h4>

<div id='cnt_ex4'>HTML Div.</div>

Daily Test with Code Example

Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
CSS Content

Last accessed pages

  1. Wake Up! (3449)
  2. Read Excel file data in PHP - PhpExcelReader (63706)
  3. JavaScript Course - Free lessons (15710)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (48156)
  5. AJAX with POST and PHP (12412)

Popular pages this month

  1. Contact page - CoursesWeb (1955)
  2. Tabs effect with CSS (1942)
  3. Insert, Select and Update NULL value in MySQL (1036)
  4. Read Excel file data in PHP - PhpExcelReader (832)
  5. PHP getElementById and getElementsByTagName (513)