Force line break after list bullets

Question

I'm looking for any nice way to automatically put the list disc marker above text instead of at the left. Like so :

I'm currently using something like :

<li>
    <br />
    Item 1
</li>

<li>
    <br />
    Item 2
</li>

<li>
    <br />
    Item 3
</li>

To force the text to be placed under the dot but in one hand adding line breaks before text in each list item makes the source quite confusing and one the other hand, it does not do what I expect, since even with a text-align: center the dot appears slightly on the left because of an implicit margin on the right of each dot.

Maybe am I missing some CSS property or my approach is not good. Any advice is welcomed, thanks.

Answer 1

li {
    display: inline-block;
    background: pink;
}
li::before {
    content:'•';
    display: block;
    text-align: center;
}

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Answer 2

Those solutions do not change <li> default behavior.

DEMO 1

HTML (with br tag)

ul {
  list-style-position: inside;
  background: yellow;
  overflow: hidden;
}

li {
  float: left;
  text-align: center;
}

<ul>
  <li><br />Item 1</li>
  <li><br />Item 2</li>
  <li><br />Item 3</li>
</ul>

DEMO 2

HTML (no br tag)

ul {
  list-style-position: inside;
  background: yellow;
  overflow: hidden;
}

li {
  float: left;
  text-align: center;
}

li:before {
  content: "";
  display: block;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>