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.
none - The pseudo-element is not generated.normal - Computes to none (default).counter(counter_index) - Sets the content as a counter.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.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.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.
<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>
<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>
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>
<input type="text" name="a_name" value="val" />
h3 {
font-variant: small-caps;
}var msg = "Visit CoursesWeb.net"; alert(msg);
$ip = $_SERVER["REMOTE_ADDR"]; echo $ip;