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 2 of 2 comments

what about Safari ? ? ?

By hleeshawty on Jul 26, 2009 12:13 am

IE hates me too.

Good tutorial btw.

By itanium on Feb 3, 2008 9:43 pm

Tutorial Details

Author jerhoyet View profile
Submitted on May 18, 2006
Page views 31,848
Favorites 9
Comments 2

Tutorial Tags