Custom Markers / Bullets
OL list-style-type
list-style-position

By default, the HTML UL element displays a bullet (•) in front of each LI list, and the OL element displays list items marked with numbers. This list-item markers can be removed, or replaced with other symbol /character, or with an image, using CSS properties.

- The examples contain the CSS and HTML code in the same place, but you should add the CSS code in the <head> section of your HTML document, or in external ".css" file.

• To remove the bullets from UL lists, or the numbering from OL lists, apply list-style: none; to that UL /OL.
<style type="text/css">
ul.nobull, ol.nobull {
  list-style: none;
}
</style>

<ul class="nobull">
  <li>Free Courses and Tutorials</li>
  <li>CSS lessons</li>
</ul>
<ol class="nobull">
  <li>http://CoursesWeb.net/</li>
  <li>http://www.Marplo.net/</li>
</ol>
Results:
  1. http://CoursesWeb.net/
  2. http://www.Marplo.net/

Custom Markers / Bullets

1. To display a custom marker / bullet for UL / OL lists, apply list-style: none; to that UL /OL. And set the ":before" pseudo-class to the LI of that UL /OL, with the "Hex code" for custom bullet to content property (the symbol must be specified in Code Hex notation).
- To this page: HTML Symbol Entities there are tables with various HTML code hex entities.
- In the body of ":before" pseudo-class you can set the color, size, and other styles for the custom bullet.
<style type="text/css">
ul.bull1, ol.bull2 {
  list-style: none;
}
ul.bull1 li:before {
  content: '\00BB';   /* code Hex notation */
  padding-right: 8px;
  color:#0000be;
}
ol.bull2 li:before {
  content: '\272C';   /* code Hex */
  padding-right: 8px;
  color:#00be00;
}
</style>

<ul class="bull1">
  <li>Free Courses and Tutorials</li>
  <li>CSS course</li>
  <li>CSS lessons</li>
</ul>
<ol class="bull2">
  <li>http://CoursesWeb.net/</li>
  <li>http://www.Marplo.net/</li>
</ol>
Results:
  1. http://CoursesWeb.net/
  2. http://www.Marplo.net/
2. Another way to display a custom bullet for UL / OL lists, is to replace the bullet with an image, using the:
list-style-image: url('image.jpg'); property to that UL /OL.
<style type="text/css">
ul.imgbull, ol.imgbull {
  list-style-image: url('image.jpg');
}
</style>

<ul class="imgbull">
  <li>Free Courses and Tutorials</li>
  <li>CSS course</li>
  <li>CSS lessons</li>
</ul>
<ol class="imgbull">
  <li>CoursesWeb.net</li>
  <li>Marplo.net</li>
</ol>
Demo:
  1. CoursesWeb.net
  2. Marplo.net

list-style-type

• By default, the OL element displays a numbered list, starting from 1 (1, 2, 3, ...). To set another type of numbering, like letters, roman, etc.; use the list-style-type property to that OL.
This property specifies the type of list-item marker.
- To start the numbering from other index, add start="index" attribute in the OL tag.
<style type="text/css">
ol.numlatin {
  list-style-type: upper-latin;
}
ol.numdec {
  list-style-type: decimal-leading-zero;
}
</style>
 - Lists with upper latin letters.
<ol class="numlatin">
  <li>Free Courses and Tutorials</li>
  <li>CSS course</li>
  <li>CSS lessons</li>
</ol>
 - Starts the numbering from the 3rd index, with decimal leading zero.
<ol class="numdec" start="3">
  <li>MarPlo.net</li>
  <li>Google.com</li>
  <li>CoursesWeb.net</li>
</ol>
Demo:
- Lists with upper latin letters.
  1. Free Courses and Tutorials
  2. CSS course
  3. CSS lessons
- Starts the numbering from the 3rd index, with decimal leading zero.
  1. MarPlo.net
  2. Google.com
  3. CoursesWeb.net
• Here is other types of list-item marker; values for list-style-type property.
- IE9 and Opera 11 do not support: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

Click on each value (blue text) to see example.

list-style-position

By default, the list-item markers appear outside the content flow. To display the list-item markers /bullets inside the content flow, apply the: list-style-position: inside; property to UL /OL item.
This property specifies if the list-item markers should appear inside or outside the content flow. It can take one of these values: inside, outside, inherit .
<style type="text/css">
ul li, ol li {
  border: 1px solid blue;
}
ul.insbull, ol.insbull {
  list-style-position: inside;
}
</style>

<ul>
  <li>List 1</li>
  <li>List 2</li>
</ul>
 - List-item markers inside the content flow.
<ul class="insbull">
  <li>Free Courses and Tutorials</li>
  <li>CSS course</li>
  <li>CSS lessons</li>
</ul>
<ol class="insbull">
  <li>MarPlo.net</li>
  <li>CoursesWeb.net</li>
</ol>
Demo:

- List-item markers inside the content flow.
  1. MarPlo.net
  2. CoursesWeb.net

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<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
Define Custom List-item Markers, Bullets for UL, OL Lists

Last accessed pages

  1. PHP Script Website Mini-Traffic (2833)
  2. Shape Fold (34)
  3. Papas Burgeria (83)
  4. Bubbles3 (1467)
  5. Totem Balls (76)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (45791)
  2. Read Excel file data in PHP - PhpExcelReader (34450)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34339)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (30919)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28165)