Decorative Images Examples: List Bullets

Accessibility Features of Example

Example

Unordered list bullet using CSS background image

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Code

<h3>Unordered list bullet using CSS background image</h3>
<ul class="bullet" title="unordered list-background image">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

CSS Code

#content ul.bullet li {
  list-style-type: none;
  text-align: center left;
  background-image: url(../images/ex-list-bullet.PNG);
  background-position: center left;
  background-repeat: no-repeat;
  padding: .3em 0 .2em 1.1em;
}

#content ul.bullet {
  margin: 0 0 .3em -.5em;
}