Show unordered list's bullet points when display:table

Question

When I try to get my list item's text to wrap with an indent so there is no text under the bullet points of the list my bullet points disappear.

I have set up the list's CSS this way:

ul
{
  display:table;
}

li
{
  display:table-row;
}

How do I get my bullet points to show again?

Thank you in advance!

[edited for clarity]

Answer 1

By setting display:table-row you remove the default list bullets, and there is (in CSS as currently defined and implemented) no way to get them back (if you wish to keep that display:table-row—it’s not obvious why you are using it).

However, you can produce markers of your own, using generated content. e.g.

li:before {
  content: "\2022";
  padding-right: 0.5em;
}

The notation \2022 stands for U+2022 BULLET “•”. Usually it does not look the same as default list bullets, but similar. You might wish to experiment with different fonts (you can set the font of the pseudo-element different from the font in the item contents).

Answer 2

You need display: list-item for the bullet to display. Remove the display: table-row from the <li> elements. Not only does it remove the bullets, list-item wraps the content properly anyway.