CSS Content

Other examples with content property

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

none - The pseudo-element is not generated.
normal - Computes to none (default).

counter(counter_index) - Sets the content as a counter.
- First, create a counter index with counter-increment property.

<style>
.cnt_ex2 {
 counter-increment: ex_index; /* Sets a counter to be increased */
}

.cnt_ex2:before {
/* Space is added to create a space between counter and rest of content */
 content: counter(ex_index) '. ';
 color: #0000d0;
}
</style>

<h4>Example CSS content counter()</h4>


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

attr(attribute) - The value of the element's attribute as a string.
- See the example from: Animated Tooltip with HTML and CSS.
string - Sets the content to the text you specify. You can add special characters using escaped Hex-code ( content: '\Hex-code'; ).
```
content: '\27A4'; /* Displays: ➤ */
```
open-quote | close-quote - The value is an opening | closing quote.
- You cannot have "close-quote" without "open-quote".
no-open-quote | no-close-quote - Removes the opening | closing quotes, if specified.

url('url') - Sets the content to be some kind of media (an image, a sound, a video, etc.) from the "url" address.
- Example:

<style>
.cnt_ex3:before {
 content: url('https://coursesweb.net/imgs/8.gif');
 margin-right: 10px;
}
</style>

<h4>Example CSS content url()</h4>

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

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>

<<-CSS3 Flexbox Item

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

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();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net