Bullets disappear with CSS3 columns

css, html-lists

Solution

I think the bullets are there, but they're being rendered to the left of the viewing area. Try:

list-style-position: inside;

Problem

The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it? See the example: http://jsfiddle.net/gduDm/1/ ``` ul li { list-style-type: disc !important; column-break-inside: avoid; } ul { list-style-type: disc !important; margin-top: 1em; column-count: 2; column-gap: 0.5em; } ```

Original source