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 meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4