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>
ul.nobull, ol.nobull {
 list-style: none;
}
</style>

<h4>Example removing bullets from lists</h4>

UL list.
<ul class='nobull'>
 <li>Free Courses and Tutorials</li>
 <li>CSS lessons</li>
</ul><br>

OL list.
<ol class='nobull'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
</ol>

Custom Markers / Bullets

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>
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>

<h4>Example lists with custom bullets</h4>

UL list.
<ul class='bull1'>
 <li>Free Courses and Tutorials</li>
 <li>CSS course</li>
 <li>CSS lessons</li>
</ul><br>

OL list.
<ol class='bull2'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
</ol>
- Another way to display a custom bullet for UL / OL lists, is to replace the bullet with an image, using this syntax:
list-style-image: url('image.jpg');
- Example:
<style>
ul {
 list-style-image: url('image.jpg');
}
</style>

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>
ol.numlatin {
 list-style-type: upper-latin;
}
ol.numdec {
 list-style-type: decimal-leading-zero;
}
</style>

<h4>Example list-style-type to OL</h4>

 - Lists with upper latin letters.
<ol class='numlatin'>
 <li>Free Courses and Tutorials</li>
 <li>Flash Games</li>
 <li>CSS lessons</li>
</ol><br>

 - Starts the numbering from the 3rd index, with decimal leading zero.
<ol class='numdec' start='3'>
 <li>MarPlo.net</li>
 <li>GamV.eu</li>
 <li>CoursesWeb.net</li>
</ol>
• Here is other types of list-item marker values for list-style-type property.

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>
ul.insbull, ol.insbull {
 list-style-position: inside;
}
ul li, ol li {
 border: 1px solid blue;
}
</style>

<h4>Example list-style-position: inside</h4>

 - Default.
<ul>
 <li>List 1</li>
 <li>List 2</li>
</ul><br>

 - 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><br>

<ol class='insbull'>
 <li>MarPlo.net</li>
 <li>CoursesWeb.net</li>
</ol>

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. Tabs effect with CSS (25647)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (32160)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (92079)
  4. SHA1 Encrypt data in JavaScript (13710)
  5. Sending data with GET and POST in the same request (4671)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (9806)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2051)
  3. Contact page - CoursesWeb (1997)
  4. Tabs effect with CSS (1995)
  5. Insert, Select and Update NULL value in MySQL (913)