Bullet styling second line CSS

July 1, 2017

When styling unordered and ordered lists, the second line is sometimes under the bullet. This doesn't look good. 

This method is easy and works well: 

First, set list-style-type to outside to position the bullets outside of the text. 

ul li { list-style-position: outside; }

The text will be aligned. 

If you want the bullets to be in line with your text, add some margin: 

ul li { margin-left: 1em; }

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.