Lists with different "markers"

Content defined in CSS

An unordered list controlled by CSS, using "li:before":

Example 4.6 - List with unicode symbol before - Example 4.6

 <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
 <ul class="bball">
   <li>Mark Few
   </li>
   <li>Roy Williams
   </li>
   <li>John Calipari
   </li>
   <li>Mike Krzyzewski
   </li>
   <li>Bill Self
   </li>
   <li>Sean Miller
   </li>
   <li>Tony Bennett
   </li>
   <li>Ray Harper
   </li>
   <li>Tom Izzo
   </li>
   <li>Bruce Pearl
   </li> </ul>

In style element (<style>) within head element: 

ul.bball { list-style: none; }
    ul.bball li:before {
        content: '🏀   ';
    }
Winningest Active Coaches, Division I NCAA Men's Basketball
  • Mark Few
  • Roy Williams
  • John Calipari
  • Mike Krzyzewski
  • Bill Self
  • Sean Miller
  • Tony Bennett
  • Ray Harper
  • Tom Izzo
  • Bruce Pearl
 

An image

And now, let's add a basketball icon as a list bullet (image is at images/basketball-icon25.png, basketball

list

An unordered list controlled by CSS:

Example 4.7 - List with images as bullets - Example 4.7

 <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
 <ul class="basketball">
   <li>Mark Few
   </li>
   <li>Roy Williams
   </li>
   <li>John Calipari
   </li>
   <li>Mike Krzyzewski
   </li>
   <li>Bill Self
   </li>
   <li>Sean Miller
   </li>
   <li>Tony Bennett
   </li>
   <li>Ray Harper
   </li>
   <li>Tom Izzo
   </li>
   <li>Bruce Pearl
   </li> </ul>

In style element (<style>) within head element: 

ul.basketball {
      list-style-image: url('images/basketball-icon25.png');
  }
Winningest Active Coaches, Division I NCAA Men's Basketball
  • Mark Few
  • Roy Williams
  • John Calipari
  • Mike Krzyzewski
  • Bill Self
  • Sean Miller
  • Tony Bennett
  • Ray Harper
  • Tom Izzo
  • Bruce Pearl