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

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

.cnt_ex1:after {
 content: ' <~';
 color: #0000d0;
}
</style>

<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':
<style>
ul.li_mark1 { list-style: none; }
ul.li_mark1 li:before {
 content: '\00BB'; /* Escaped Hex code notation */
 padding-right: 8px;
}
</style>

<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>
</ul>

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;.
<style>
#cnt_ex4:after {
 color:#0000e0;
 content: '- Text from content \a Another line.';
 white-space: pre;
}
</style>

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

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
CSS Content

Last accessed pages

  1. ActionScript 3 - Change MovieClip Color (6011)
  2. PHP Unzipper - Extract Zip, Rar Archives (1638)
  3. Convert XML to JSON in JavaScript (17793)
  4. SHA256 Encrypt hash in JavaScript (6142)
  5. Create simple Website with PHP (19668)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (575)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (498)
  3. Register and show online users and visitors (414)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (402)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (375)