Custom List Style

CSS Tutorials

Tutorial

Click on thumbnailed images to enlarge

This Only Works in Firefox; IE hates CSS2

This is a simple tutorial, more of an example. You must have a knowledge of working with CSS to implement this code and use it properly.

Simple edit the contents after "content" with any characters you may desire to appear before your lists.

<style type="text/css">
html>body ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body li {
margin: 7px 0 8px 10px;
list-style: none;
}

ul li:before {
content: ">>";
}
</style>

Tutorial Comments

Showing latest 3 of 3 comments

@hlessshawty, "This only works in Firefox" means: it only works in Firefox. But I know what u mean- I'm not on Firefox either(:

By Butterface89 on Jul 16, 2010 7:48 am

what about Safari ? ? ?

By hleeshawty on Jul 26, 2009 12:13 am

IE hates me too.

Good tutorial btw.

By heyo-captain-jack on Feb 3, 2008 9:43 pm

Tutorial Details

Author jerhoyet View profile
Submitted on May 18, 2006
Page views 45,771
Favorites 11
Comments 3

Tutorial Tags