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 attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
CSS Content

Last accessed pages

  1. Contact page - CoursesWeb (40728)
  2. Tabs effect with CSS (41340)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (48502)
  4. Register and show online users and visitors (31668)
  5. JavaScript trim, rtrim and ltrim (6547)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (420)
  2. Contact page - CoursesWeb (402)
  3. Tabs effect with CSS (401)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (170)
  5. Insert, Select and Update NULL value in MySQL (157)