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 create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Define Custom List-item Markers, Bullets for UL, OL Lists

Last accessed pages

  1. Lost in a Fairy Tale (70)
  2. Various Games (648)
  3. Naruto Dress Up (38)
  4. Add data from form in text file in JSON format (6492)
  5. Paragraphs, Line break, Horizontal rule (1534)

Top accessed pages

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