## 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>ul.bball { list-style: none; } ul.bball li:before { content: '🏀 '; }

- Markup
- Style
- Display

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

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>ul.basketball { list-style-image: url('http://cscie12.dce.harvard.edu/resources/images/basketball-icon25.png'); }

- Markup
- Style
- Display

     <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