Home Blog Others Adding a custom bullet point using CSS
Adding a custom bullet point using CSS
Others
Written by Dicky   
Wednesday, 03 August 2011 09:35
AddThis Social Bookmark Button

Suppose you want to add a non-standardized bullet point when you creating your list using <ul> and <li>. You can simply use CSS to insert content before your list.

Here's the HTML code:

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5 we'll make a bit longer so
        that it will wrap</li>
</ul>

and here's the CSS code:

ul {
    list-style: none;
    }

ul li:before {
    content: "\00BB \0020";
    }

It will show up as this:

» Item 1
» Item 2
» Item 3
» Item 4
» Item 5 we'll make a bit longer so
 that it will wrap

For a whole list of reference, check out this article!