November 11, 2011

CSS - Unordered lists with hyphen

Formatting unordered lists with hyphens, like:
- Bullet 1
- Bullet 2

This can be done manually by removing the default bullet and adding a hyphen sign, and adjusting margins, etc, such as:

                            <style>
                                ul.hyphen-list {
                                    list-style-type: none;
                                    margin-left: 1.5em;
                                    padding-left: 1em;
                                    text-indent: -0.85em;
                                }
                                ul.hyphen-list li:before {
                                    content: "- ";
                                }
                            </style>
                            <ul class="hyphen-list">
                                <li>This is line 1<br/>part 2</li>
                                <li>This is line 2</li>
                            </ul>


For more information, see following resources:
/Sfynx

No comments:

Post a Comment