Using a character as a custom list bullet
June 8, 2010 5:31 PM   Subscribe

I would like to use CSS to style my lists with a custom bullet. I would like to use ">>" but not as an image. I don't want to type it before a link because a screen reader will read it. Can I use characters as a custom bullet?
posted by Foam Pants to Computers & Internet (8 answers total) 2 users marked this as a favorite
 
Without using an image? You'd have to use CSS3.
posted by nitsuj at 5:33 PM on June 8, 2010


Response by poster: I found this example but I can't tell if a screen reader will read it.
posted by Foam Pants at 5:34 PM on June 8, 2010 [1 favorite]


Do you mean the double-chevron? I think you can do that according to that article. ยป
posted by jessamyn at 5:39 PM on June 8, 2010


Oops, I stand corrected. Good to know!
posted by nitsuj at 5:40 PM on June 8, 2010


I'm not sure this will get read by screenreaders, but with CSS2: 
<html>
<style type="text/css">
ul {
  list-style-type: none;
  padding: 0;
}
ul li:before {
content: ">> ";
}
</style>
<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
  </ul>
</body>
</html>
Note: Browser support information here
posted by artlung at 5:55 PM on June 8, 2010


What artlung suggests will work. It also won't appear for screen readers. There's a good A List Apart article with some more information.
posted by thebestsophist at 6:03 PM on June 8, 2010


Response by poster: I've read that :before only works on a limited number of browsers. Is that true?
posted by Foam Pants at 12:25 PM on June 9, 2010


Response by poster: Yes, I know, I should finish reading before I ask a question. I need to start listening to my mother...
posted by Foam Pants at 12:26 PM on June 9, 2010


« Older Help me find my missing folder on a USB drive.   |   How do I get an anniversary present to India? Newer »
This thread is closed to new comments.


Tags

Share