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 definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Define Custom List-item Markers, Bullets for UL, OL Lists

Last accessed pages

  1. Super Mario Crossover (506)
  2. Flash Games - Free online Games (13206)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (54372)
  4. Action Games (4890)
  5. Jet Velocity 3d (232)

Popular pages this month

  1. Bubbles3 (3136)
  2. Butterfly Kyodai (2748)
  3. Zuma Deluxe (2025)
  4. Qwop (1252)
  5. Backgammon (1197)